1. Гость, на данный момент выплаты с форума превысили 7000 долларов! Присоединяйся к нам и начинай зарабатывать!
  2. Гость, спеши получить на новый год подарок от форума!!! Подробности тут
    Скрыть объявление
  3. Гость, примите участие в прогнозе курса Bitcoin и выиграйте коллекционную монету!
    Скрыть объявление
  4. Гость, участвуй в конкурсе прогнозов по валютной паре EUR|AUD ! Призовой фонд - 350 долларов! Участвовать
    Скрыть объявление
  5. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  6. Гость, пользуете ОС Android на планшете или смартфоне? Возможно Вам пригодится приложение нашего форума
    Скрыть объявление
  7. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

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

Тема в разделе "Движки, шаблоны, стили, модули, хаки", создана пользователем monahyip, янв 1, 2016.

Метки:
  1. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Как то нашел одну интересную фишку - наводишь на текст, а он меняет цвет или цвет смещается вправо. Получается очень привлекательно. Иногда можно использовать в шапке для текста домена. На некоторых шаблонах в сети и делают такой эффект (например, шаблон 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.
    21.png
     
  2. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    1,723
    Симпатии:
    107
    Баллы:
    17
    Пол:
    Мужской
    Недавно начал изучать 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 
    document.getElementById("fin");
        if(
    a.style.color == "green" )
        
    a.style.color 'orange';

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

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

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


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

        else {
           
            
    a.style.color "black"
        
    }
    }
    Разница в том, что не нужно выходить из спана, чтобы цвет отдельного куска текста поменялся.
     
  3. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    javascript, и тем более jquery - позволяют делать очень динамичные и красивые страницы...НО не на всех устройствах поддерживаются эффекты.
    А css на мобайле норм и почти во всех браузерах.
     
  4. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    1,723
    Симпатии:
    107
    Баллы:
    17
    Пол:
    Мужской
    Ну это раньше проблемы были. Сейчас любой нормальный сайт содержит скрипты.
     
  5. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Да, но браузеры то отказываются :) Например, хром хочет отказаться от флеша полностью +уже некоторые версия яваскрипт отключают.
     
  6. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    1,723
    Симпатии:
    107
    Баллы:
    17
    Пол:
    Мужской
    Не знаю, все это время только проблема была со старым ИЕ.