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

    Ссылка на тему

  5. Гость, на форуме стартует Акция: поощрение за заслуги перед форумом. Принимай активное участие в жизни форума и получай за это поощрение! Подробности по ссылке
    Скрыть объявление
  6. Гость, приглашаем тебя принять участие в турнире по покеру!

    Все подробности тут

    Скрыть объявление
  7. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление

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

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

Метки:
  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    671
    Симпатии:
    73
    Баллы:
    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,444
    Симпатии:
    314
    Баллы:
    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
    Сообщения:
    671
    Симпатии:
    73
    Баллы:
    6
    javascript, и тем более jquery - позволяют делать очень динамичные и красивые страницы...НО не на всех устройствах поддерживаются эффекты.
    А css на мобайле норм и почти во всех браузерах.
     
  4. Mamikon

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

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

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

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

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

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

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

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

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