Javascript-форум - Плавное подчеркивание ссылок.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Плавное подчеркивание ссылок. (https://javascript.ru/forum/events/70280-plavnoe-podcherkivanie-ssylok.html)

Плавное подчеркивание ссылок.

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

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

Цитата:

Сообщение от 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

<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. Так как тема помечена закрытой скорее всего никто из компьютерных гуру мне не ответит. Эх...

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

Мой доработанный скрипт.

Вот немного доработанный мной вариант скрипта. Ссылки на каждом сайте будут подчеркиваться новым цветом!

// ==UserScript==
// @name         Underline_links
// @namespace    [url]http://tampermonkey.net/[/url]
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      [url]https://*[/url]
// @include      [url]http://*[/url]
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var i = Math.floor(Math.random()*8);
    var elem = document.createElement('style');
    switch (i) {
        case 0:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: red !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 1:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: orangered !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 2:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: yellowgreen !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 3:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: green !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 4:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: teal !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 5:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: aqua !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 6:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: deepskyblue !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
            break;
        case 7:
            elem.innerHTML ='a {line-height: 1 !important;display: inline-block !important;cursor: pointer;} a:after {display: block !important;position: relative !important;content: "" !important;height: 2px !important;width: 0% !important;background-color: fuchsia !important; transition: all .3s ease-in-out !important;left: 50% !important;} a:hover:after, a:focus:after {width: 100% !important;left:0% !important;} a:hover{text-decoration: none !important;}';
    };
    document.head.appendChild(elem);
})();

Вам бы про циклы почитать и циклические методы работы с массивами.