| Kosten | Пятница, 17 Января 2020, 18:23 | Сообщение 1 |
| Давайте рассмотрим несколько эффектов, которые безусловно преобразят сайт при переходе по ссылке. А точнее здесь идет подмена оригинального эффекта, что идет по умолчанию. Селектор: 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.
Демонстрация
| | Страна: (RU) |
| |
