Как сделать при наведении мыши меняется картинка

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

Делается данная "штука" при помощи стилей 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"><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"> - единица контейнера, в которой находится ссылка

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

Практика

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

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

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

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

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

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

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

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

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

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

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

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

Послесловие

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

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

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

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


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

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


Источник: http://mojwp.ru/css-hover.html



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как редактировать сообщения в Скайпе? Переделывать женскую одежду

Как отключить панель Charms Bar в Windows 8 Настраиваем The KMPlayer - PC Guideline HTML, CSS, JavaScript, PHP Статьи Отступы и поля Псевдоклассы Cached Апликаторы Кузнецова - купить недорого в интернет-магазине Афоризмы, цитаты, статусы и высказывания про любовь

Похожие новости