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