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

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

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

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

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

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

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

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

Практика

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

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

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

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

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

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

Послесловие

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

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

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

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

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


Задавай вопросы вебмастерам и общайся в канале Телеграм Трибуна. Там можно пообщаться со мной почти ежедневно.


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


Поделись с друзьями



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



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


Как сделать 100 причин по которым я тебя люблю
Как сделать страницу в контакте не на номер
Как сделать желейный лизун
Как сделать электростеклоподъемник
Поделка волка своими руками


Как сделать чтобы при наведении курсор
Как сделать чтобы при наведении курсор


Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как сделать, чтобы при наведении курсора на текст появлялась всплывающая



ШОКИРУЮЩИЕ НОВОСТИ