mojwp.ru
Назад

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

Опубликовано: 14.02.2013
17
26104

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

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

Обновлено 17.01.2019

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

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

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


В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер <div>, <li> и прочие подходящие теги.

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div class="catside">тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

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

.catside a:hover {
background: #0078BF;
color: #fff;
}

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

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

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

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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Александр Крылов
    Опубликовано: 28.07.2013 Ответить на сообщение
    .licat:hover a {color:#fff;}

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

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

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

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

    • Виталий
      Опубликовано: 28.07.2013 Ответить на сообщение

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

      • Александр Крылов
        Опубликовано: 28.07.2013 Ответить на сообщение

        Спасибо )

      • Александр Крылов
        Опубликовано: 29.07.2013 Ответить на сообщение

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

  • Серега
    Опубликовано: 17.02.2014 Ответить на сообщение

    Спасибо за интересное решение! Конечно пришлось доработать код под свой шаблон, в итоге у меня цвет текста ссылки меняется немного по другому вот код:
    .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;.
    Может подскажите верное решение для работы задержки в мозиле, много что испробовал ничего не помогло, а у вас работает. Подскажите решение?!

    • Виталий
      Опубликовано: 17.02.2014 Ответить на сообщение

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

      transition: all 0.5s ease-out 0s;

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

      • Серега
        Опубликовано: 18.02.2014 Ответить на сообщение

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

  • Maks
    Опубликовано: 15.02.2015 Ответить на сообщение

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

  • dimka
    Опубликовано: 20.04.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 20.04.2015 Ответить на сообщение

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

  • Евгений
    Опубликовано: 19.05.2015 Ответить на сообщение

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

  • Елена
    Опубликовано: 11.07.2015 Ответить на сообщение

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

  • BiobioZoot
    Опубликовано: 14.07.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 14.07.2015 Ответить на сообщение

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

  • Сергей
    Опубликовано: 26.05.2016 Ответить на сообщение

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

  • Видео
    Опубликовано: 26.08.2016 Ответить на сообщение

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

  • silka
    Опубликовано: 28.08.2016 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.