Плавное подчеркивание ссылок.
Доброго времени суток!
Подскажите, можно ли добиться эффекта плавного подчеркивания ссылок при наведении мыши на чистом JavaScript? |
Цитата:
<style type='text/css'>
a {
line-height: 1;
display: inline-block;
text-decoration:none;
cursor: pointer;
}
a:after {
display: block;
content: "";
height: 2px;
width: 0%;
background-color: #000000;
transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
width: 100%;
}
</style>
<a href='#'>Test text</a>
Взято тут http://dbmast.ru/plavnoe-podchyorkiv...-pri-navedenii |
|
<style type='text/css'>
a {
line-height: 1;
display: inline-block;
text-decoration:none;
cursor: pointer;
}
a:after {
display: block;
position: relative;
content: "";
height: 2px;
width: 0%;
background-color: #000000;
transition: all .3s ease-in-out;
left: 50%;
}
a:hover:after,
a:focus:after {
width: 100%;
left: 0;
}
</style>
<a href='#'>Test text</a>
Чуть переделал пример КСА |
Всё это замечательно на CSS. Но мне нужен пользовательский скрипт для браузера FF который бы плавно подчёркивал ссылки на любой странице.
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#">ссылка</a>
<script>
if(!document.querySelector('style')) document.head.insertAdjacentHTML('beforeend', '<style></style>');
document.querySelector('style').innerHTML +='a {line-height: 1;display: inline-block;text-decoration:none;cursor: pointer;}a:after {display: block;content: "";height: 2px;width: 0%;background-color: #000000; transition: width .3s ease-in-out;}a:hover:after,a:focus:after {width: 100%;}';
</script>
</body>
</html>
|
Спасибо
|
Вопрос: почему стиль созданный с помощью размещенного выше скрипта срабатывает не для всех ссылок на странице?
P.S. Так как тема помечена закрытой скорее всего никто из компьютерных гуру мне не ответит. Эх... |
Смотри в панель разработчика, может какие-то свойства перезаписываются другими.
|
Deleted.
|
| Часовой пояс GMT +3, время: 15:08. |