1. Гость, теперь Вы можете заходить на форум с гаджетов работающих на ОС Android, версии 4.4 и выше, через наше приложение. Приложение доступно по .
    Скрыть объявление
  2. Гость, приглашаем принять участие в конкурсе Футбольной аналитикой и выиграть денежные призы призы! Ссылка на тему
    Скрыть объявление
  3. Гость, на данный момент выплаты с форума превысили 15000 долларов! Присоединяйся к нам и начинай зарабатывать!
  4. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  5. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление
Скрыть объявление
Гость, приглашаем Вас принять участие в конкурсе мемов Аффтар Жжот.

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

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

Метки:
  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    653
    Симпатии:
    68
    Баллы:
    6
    Как то нашел одну интересную фишку - наводишь на текст, а он меняет цвет или цвет смещается вправо. Получается очень привлекательно. Иногда можно использовать в шапке для текста домена. На некоторых шаблонах в сети и делают такой эффект (например, шаблон 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
    Сообщения:
    2,430
    Симпатии:
    304
    Баллы:
    30
    Недавно начал изучать 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
    Сообщения:
    653
    Симпатии:
    68
    Баллы:
    6
    javascript, и тем более jquery - позволяют делать очень динамичные и красивые страницы...НО не на всех устройствах поддерживаются эффекты.
    А css на мобайле норм и почти во всех браузерах.
     
  4. Mamikon

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

    Регистрация:
    окт 23, 2015
    Сообщения:
    2,430
    Симпатии:
    304
    Баллы:
    30
    Ну это раньше проблемы были. Сейчас любой нормальный сайт содержит скрипты.
     
  5. monahyip

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

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

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

    Регистрация:
    окт 23, 2015
    Сообщения:
    2,430
    Симпатии:
    304
    Баллы:
    30
    Не знаю, все это время только проблема была со старым ИЕ.
     
  7. Bullsshop

    Bullsshop Пользователь Стандартная ставка оплаты

    Регистрация:
    май 28, 2019
    Сообщения:
    30
    Симпатии:
    4
    Баллы:
    0
    не понял не черта
     
  8. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    653
    Симпатии:
    68
    Баллы:
    6
    меньше постов набивайте, займитесь чем - то поймете :)
    это для вебмастеров.
     

Поделиться этой страницей