• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Работа с эффектами ссылок на Hover Effects (Как правильно изменить цвет элемента по наведению мышки)
Работа с эффектами ссылок на Hover Effects
Kosten
Дата: Пятница, 2020-01-17, 18:23 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26707
Награды: 61


Давайте рассмотрим несколько эффектов, которые безусловно преобразят сайт при переходе по ссылке. А точнее здесь идет подмена оригинального эффекта, что идет по умолчанию. Селектор: hover используется для выбора элементов, содержащихся на веб-сайте, когда мы наводим указатель мыши на эти элементы.

Селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс: hover CSS запускается, когда пользователь наводит указатель мыши на элемент содержимого веб-страницы.



И так:

Код
<!DOCTYPE html>
<html>
<head>
<style>
a.penedev1:hover, a.penedev1:active {color: #7d0a7d;}
a.penedev2:hover, a.penedev2:active {font-size: 210%;}
a.penedev3:hover, a.penedev3:active {background: #efef0e;}
a.penedev4:hover, a.penedev4:active {font-family: arial;}
a.penedev5:visited, a.penedev5:link {text-decoration: none;}
a.penedev5:hover, a.penedev5:active {text-decoration: underline;}
</style>
</head>
<body>
<p>Наведите указатель мыши на ссылки, чтобы заметить изменения.</p>
<p><a class="penedev1" href="/">Эта ссылка изменит свой цвет</a></p>
<p><a class="penedev2" href="/">Эта ссылка изменит свой размер шрифта</a></p>
<p><a class="penedev3" href="/">Эта ссылка изменит свой цвет фона</a></p>
<p><a class="penedev4" href="/">Эта ссылка изменит свое семейство шрифтов</a></p>
<p><a class="penedev5" href="/">Эта ссылка изменит свое текстовое оформление</a></p>
</body>
</html>

Стили, определенные активами псевдокласса, будут перезаписаны любым последующим классом, а именно: link,: active или: visit, который имеет хотя бы один равный атрибут. Таким образом, чтобы связать соответствующие стили, используйте правило: hover after: link и: visit, но before: active, как определено командой LVHA-order: : link -: visited -: hover -: active.

Демонстрация
Прикрепления: 9454135.png(5.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Работа с эффектами ссылок на Hover Effects (Как правильно изменить цвет элемента по наведению мышки)
  • Страница 1 из 1
  • 1
Поиск: