Форум

Nik123 · #1 (**permalink**) 24.08.2017, 10:07

Доброго времени суток!

Подскажите, можно ли добиться эффекта плавного подчеркивания ссылок при наведении мыши на чистом JavaScript?

ksa · #2 (**permalink**) 24.08.2017, 10:42

Сообщение от Nik123

можно ли добиться эффекта плавного подчеркивания ссылок при наведении мыши на чистом 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

рони · #3 (**permalink**) 24.08.2017, 11:06

Nik123,
https://javascript.ru/forum/jquery/4...tml#post294215

j0hnik · #4 (**permalink**) 24.08.2017, 11:15

<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>

Чуть переделал пример КСА

Nik123 · #5 (**permalink**) 24.08.2017, 17:19

Всё это замечательно на CSS. Но мне нужен пользовательский скрипт для браузера FF который бы плавно подчёркивал ссылки на любой странице.

j0hnik · #6 (**permalink**) 24.08.2017, 19:46

<!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>

Nik123 · #7 (**permalink**) 25.08.2017, 07:43

Спасибо

Nik123 · #8 (**permalink**) 13.09.2017, 11:50

Вопрос: почему стиль созданный с помощью размещенного выше скрипта срабатывает не для всех ссылок на странице?

P.S. Так как тема помечена закрытой скорее всего никто из компьютерных гуру мне не ответит. Эх...

j0hnik · #9 (**permalink**) 13.09.2017, 11:58

Смотри в панель разработчика, может какие-то свойства перезаписываются другими.

Nik123 · #10 (**permalink**) 14.09.2017, 07:11

Deleted.

Форум

Справочник

Discord чат

Курсы javascript