Селектор :hover
Установить селектор и стиль ссылки при наведении на нее курсора мыши:
a:hover
{
background-color: yellow;
}
Попробуйте сами »
Определение :hover
Селектор :hover
используется для выбора элементов при наведении на них курсора мыши.
Совет: Селектор :hover
может использоваться на всех элементах, а не только на ссылках.
Совет: Используйте селектор :link для стиля ссылок на непросмотренные страницы, селектор :visited для стиля ссылок на посещенные страницы, и селектор :active для стиля активной ссылки.
Примечание: :hover
должен сработать после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!
Версия: | CSS1 |
---|
Поддержка браузеров :hover
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
Селектор | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS Синтаксис :hover
Ещё примеры :hover
Установить селектор и стиль элемента <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%;
}
Попробуйте сами »
Наведите курсор на элемент <span>, чтобы показать элемент <div> (как подсказка):
div {
display: none;
}
span:hover + div {
display: block;
}
Попробуйте сами »
Установить показ и скрытие выпадающее меню при наведении мыши:
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;}
Попробуйте сами »
Похожие страницы :hover
CSS Учебник: CSS Ссылки
CSS Учебник: CSS Псевдо классы