Використання :hover

9 червня 2022 р.920

На прикладі посилань використання :hover виглядає так.

a { color: green; } 
a:hover { color: red; }

Спершу ми визначаємо вихідний стиль елемента, зокрема, задаємо колір посилань за допомогою селектора A зеленим. Потім нижче пишемо той же селектор і через двокрапку без пробілів додаємо до нього :hover. Після цього йдуть стильові правила, які мають проявлятися під час наведення курсору на елемент. В даному випадку ми змінюємо колір посилання на червоний. селектори, що дозволяє на одній веб-сторінці робити групи посилань різних видів. У прикладі 1 посилання <header> додані без традиційного підкреслення через властивість text-decoration зі значенням none. При наведенні на ці посилання додається підкреслення за допомогою значення underline. У <footer> посилання при наведенні просто змінюють свій колір.

Приклад 1. Використання :hover для посилань

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Сальса</title> <style> header { background: #e2edc1; } 
footer { background: #f4783b; } 
ul { margin: 0; padding: 10px; } 
li { display: inline; margin-right: 10px; } 
header a { color: #333391; /* Колір посилань */
text-decoration: none; /* Забираємо підкреслення */
} 
header a:hover { text-decoration: underline; /* Додаємо підкреслення при наведенні */
} 
footer a { color: #fff; } 
footer a:hover { color: #333; }
</style>
</head>
<body> <header> <ul> <li><a href="#">Uno</a></li> <li><a href="#">Dos</a></li> <li><a href="#">Tres</a></li>
</ul>
</header> <main> <p>Сальса — сучасний соціальний танець. Як багато латиноамериканських танців, сальса експресивна, різноманітна і багата на імпровізацію.</p>
</main> <footer> <ul> <li><a href="#">Cinco</a></li> <li><a href="#">Seis</a></li> <li><a href="#">Siete</a></li>
</ul>
</footer>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Посилання різних кольорів

Мал. 1. Посилання різних кольорів

Потрібно враховувати, що в деяких ситуаціях :hover може не давати видимого результату, коли він неявно перевизначається. У наведеному стилі :hover не змінює колір у відвіданих посилань, оскільки псевдоклас :visited розташований у коді нижче :hover.

a { color: green; } 
a:hover { color: red; } 
a:visited { color: purple; }

Зверніть увагу, що положення коду впливає на кінцевий результат. Досить поставити :hover нижче :visited і колір відвідуваних посилань при наведенні змінюватиметься на червоний.

a { color: green; } 
a:visited { color: purple; } 
a:hover { color: red; }

Див. також