CSS selector a:hover
Селектор :hover використовується для вибірки та задання стилю посиланням, на які наведено курсор.
| Нотатка: | Селектор Також використовуйте селектори Селектор |
Синтаксис
:hover {
css declarations;
}Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| hover | 4.0 |
7.0 |
2.0 |
3.1 |
9.6 |
Мобільних переглядачів ще не додано.
Мобільних переглядачів ще не додано.
Приклади
Обирає посилання і задає йому жовтий фон, коли на нього переміщують курсор.
a:hover {
background-color: yellow;
}Обирає і задає стиль при наведенні курсору на елементи <p>, <h1> та <a>.
p:hover, h1:hover, a:hover {
background-color: yellow;
}Обирає і задає стиль посиланням (за якими ще не переходили, за якими вже переходили, на які навели курсор та активним)
,/* Посилання, за якими не переходили */
a:link {
color: green;
}
/* Посилання, за якими переходили */
a:visited {
color: green;
}
/* Посилання, на які навели курсор */
a:hover {
color: red;
}
/* Посилання, по яким клікнули */
a:active {
color: yellow;
}Стилізує посилання
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}Відображає і ховає меню при наведенні курсору. Так зване "випадаюче меню".
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}