Смена цветов текста при наведении css

Как то нашел одну интересную фишку - наводишь на текст, а он меняет цвет или цвет смещается вправо. Получается очень привлекательно. Иногда можно использовать в шапке для текста домена. На некоторых шаблонах в сети и делают такой эффект (например, шаблон bluepink html, не рекламирую, в гугле можете глянуть пример).
И меня заинтересовало как такое можно сделать, тем более стилями css, а не яваскриптами. Решение оказалось очень простое.

Алгоритм​

1. Помещаем весь текст в div (colortext)
2. Для нужного отрывка (или для каждого буквы) задаем свой класс, но в теге span. Почему не div? Потому что див создает дополнительные отступы, а спан - ничего лишнего не делает.
3. Потом задаем стиля для span'ов при наведении на div colortext (свойство hover).

Практическое решение​

Допустим, сделаем разноцветным текст домена FinForum.net, при этом условно разобьем домен на 3 части: fin, forum, .net. Зону сделаем сероватой, пусть при наведении только немного темнее становится.
Fin красным, forum - зеленым, а при наведении смену цветов (зеленый/красный).
1. Код html

Код:

<div class='colortext'>
<span class='fin'>Fin</span><span class='frum'>Forum</span><span class='zon'>.net</span>
</div> 

2. Код css

Код:

.fin{color:orange;}
.frum{color:green;}
.zon{color:#dbdbdb;}
.colortext:hover .fin {color:green;}
.colortext:hover .frum{color:orange;}
.colortext:hover .zon{color:black;}

3. Онлайн проверить можете здесь на jsfiddle.

 

Недавно начал изучать javaScript и решил попробовать оформить на нем смену цветов текста при наведении. Кстати, цвета меняются, как бы сказать более динамично, что при ховере.

Вот код html:

HTML:

<span onmouseover="fun1()" id='fin'>Fin</span><span onmouseover="fun2()" id='forum'>Forum</span><span onmouseover="fun3()" id='zon'>.net</span>

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

PHP:

function fun1() {
   
    var a = document.getElementById("fin");
    if(a.style.color == "green" )
    a.style.color = 'orange';

    else {
       
        a.style.color = "green"
    }
}

function fun2() {
   
    var a = document.getElementById("forum");
    if(a.style.color == "orange" )
    a.style.color = 'green';

    else {
       
        a.style.color = "orange"
    }
}


function fun3() {
   
    var a = document.getElementById("zon");
    if(a.style.color == "black" )
    a.style.color = '#dbdbdb';

    else {
       
        a.style.color = "black"
    }
}


Разница в том, что не нужно выходить из спана, чтобы цвет отдельного куска текста поменялся.

 

javascript, и тем более jquery - позволяют делать очень динамичные и красивые страницы...НО не на всех устройствах поддерживаются эффекты.
А css на мобайле норм и почти во всех браузерах.

 

Ну это раньше проблемы были. Сейчас любой нормальный сайт содержит скрипты.

 

Да, но браузеры то отказываются Например, хром хочет отказаться от флеша полностью +уже некоторые версия яваскрипт отключают.

 

Не знаю, все это время только проблема была со старым ИЕ.

 

меньше постов набивайте, займитесь чем - то поймете
это для вебмастеров.