Меняем цвет элемента по наведению мышки

смена цвета элемента по наведению мышкиВ данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.

Делается данная "штука" при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:

Как только мышка оказывается наведена на любое поле в списке - происходит смена заднего фона строки, а так же цвет шрифта/ссылки в названии рубрики сайта.

Вот так выглядит код данного блока:

<div class="licat"><a href="http://mojwp.ru/category/birzi-ssylok">Биржи ссылок</a></div>
<div class="licat"><a href="http://mojwp.ru/category/plugins">Все плагины Wordpress</a></div>
<div class="licat"><a href="http://mojwp.ru/category/poleznoe">Всякие полезности</a></div>
<div class="licat"><a href="http://mojwp.ru/category/ukrashenie" >Украшаем сайт</a></div>
<div class="licat"><a href="http://mojwp.ru/category/hak">Хаки Wordpress</a></div>

К слову: я специально сделал построение рубрик в сайдбаре вручную, т.к. теперь появилась возможность убрать ненужные и выставить их в произвольном порядке. Делается это через обычный виджет Текст.

В моем примере видим:

<div class="licat"> - единица контейнера, в которой находится ссылка

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

.licat:hover {background:#51AE3A;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на зеленый (#51AE3A). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать ЗДЕСЬ).

Чуть понятнее: был класс единицы элемента licat. Для него мы добавили псевдокласс hover и оформили по правилам CSS (добавили точку в начале и двоеточие между ними).

Теперь нужно сделать так, чтобы при наведении менялся и цвет ссылки, т.к. при смене заднего фона стандартный цвет текста может сливаться. Для этого так же добавляем в файл стилей вторую строчку:

.licat:hover a {color:#fff;}

Здесь практически такая же строка, только мы добавили правило конкретно для ссылки - добавили букву a, которая обозначает тег ссылки в HTML. Для нее прописали color:#fff;, что означает смену цвета текста на белый (#fff).

А теперь две строки вместе, чтобы видеть полный объем работы:

.licat:hover {background:#51AE3A;}
.licat:hover a {color:#fff;}

Послесловие

В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться дополнением к браузеру FireBug (как им пользоваться смотрите видео на моем канале YOUTUBE).

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 17 комментариев
  1. Александр Крылов (11 комм.) says:
    http://aleksandr-krylov.ru/
    .licat:hover a {color:#fff;}

    Вот эта строчка должна быть такой:

    a.licat:hover {color:#fff;}

    По крайней мере, у меня по-другому не работает.

    А как сделать задержку в изменении цвета и полукруглые углы этого прямоугольника?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      1. от шаба зависит
      2. CSS. Гуглите в сторону border-radius (закругление) и transition (задержка)

      • Александр Крылов (11 комм.) says:
        http://aleksandr-krylov.ru/

        Спасибо )

      • Александр Крылов (11 комм.) says:
        http://aleksandr-krylov.ru/

        Всё получилось. ) Спасибо.

  2. Серега (5 комм.) says:
    http://sevelweb.ru

    Спасибо за интересное решение! Конечно пришлось доработать код под свой шаблон, в итоге у меня цвет текста ссылки меняется немного по другому вот код:
    .link {
    border:1px solid #c4c4c4;
    font-size:14px;
    font-family: georgia, times, verdana;
    border-radius:3px;
    padding: 0 5px 2px 5px; color:#f15000; background:#EFEFEF;
    -webkit-transition: background 1s ease;
    -moz-transition-delay: 1s ease;
    }
    .link:hover {color:#fff !important; background:#51AE3A;}
    но мазила задержку все равно не показывает, хотя я и прписал ей условие -moz-transition-delay: 1s ease;.
    Может подскажите верное решение для работы задержки в мозиле, много что испробовал ничего не помогло, а у вас работает. Подскажите решение?!

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Пробуйте такой вариант

      transition: all 0.5s ease-out 0s;

      Ставить нужно на элемент без hover

      • Серега (5 комм.) says:
        http://sevelweb.ru

        Спасибо за подсказку! Как выяснилось для мозилы еще вот такой вариант работает -moz-transition: 1s ease;
        И как Вы верно заметили прописывать это нужно до элемента без hover.

  3. Maks (1 комм.) says:

    Доброго времени суток. Есть сайт на WordPress, проблема с изменением цвета при наведении и при попадании на страницу навигационного меню. Меняет цвет только главная страница, то есть: moysait.ru , а все остальные страницы, например: moysait.ru/1 страница, moysait.ru/2 страница...не меняют цвета при наведении и попадании на страницу навигационного меню. Что с этим делать, может быть вы сталкивались с таким.

  4. dimka (1 комм.) says:

    Такой вопрос:
    у вордпресса во многих шаблонах по умолчанию цвет гиперссылки при наведении курсора меняется на другой, но это в том случае если цвет текста этой гиперссылки не менять в визуальном редакторе вордпресса.
    если же я меняю цвет текста гиперссылки в визуальном редакторе, то цвет этой гиперссылки при наведении крусора не изменяется.
    Что в коде поменять или прописать, чтобы цвет гиперссылки менялся даже если я меняю цвет текста этой гиперссылки в визуальном редакторе?
    Ну пипец, блин изъяснился :)). Надеюсь, хоть понятно что
    я имел ввиду. Помогите, плиз.

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Меняется по псевдо-классу :hover. Задается он в файле стилей.
      Из визуального редактора вы можете поменять просто цвет ссылки, без наведения.

  5. Евгений (1 комм.) says:

    То что нужно, спасибо

  6. Елена (1 комм.) says:

    У меня была сложность с плавным изменением цвета текста (фон хорошо и быстро получилось сделать плавным). Но именно ваша статья помогла найти мне решение проблемы. Благодарю! Успехов вам;)

  7. BiobioZoot (1 комм.) says:
    http://freesoft.topmall.info/

    Как средствами CSS сделать так, чтобы при наведении мыши на один элемент изменялось свойство другого элемента?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Указать последовательно классы элементов.
      Примерно: .class_1:hover .class_2 {}

  8. Сергей (1 комм.) says:

    Спасибо, помогло!

  9. Видео (1 комм.) says:
    http://porno-kings.ru/Porno_v_uniforme/

    Спасибо, помогло!

  10. silka (1 комм.) says:

    Здравствуйте!
    А как сделать меню как на этом сайте nngroup.com? очень хочу такое же меню

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.49MB | MySQL:80 | 0,624sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html