Селектор :hover

❮ Назад CSS Селекторы справочник Далее ❯

Пример

Установить селектор и стиль ссылки при наведении на нее курсора мыши:

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 {
css декларации;
} Демо

Ещё примеры :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;}

Попробуйте сами »