Псевдо-класс :hover в CSS

Определение и использование

CSS :hover Псевдо-классы используются для выбора элементов при наведении мыши.

Совет::hover Псевдо-классы могут применяться ко всем элементам, а не только к ссылкам.

Совет:Используйте :link Установите стиль ссылок на непосещенные страницы, используя :visited Установите стиль ссылок на посещенные страницы, используя :active Установите стиль активных ссылок.

Внимание:В CSS определениях::hover должен быть放在 :link и :visited(! если существует) перед тем, как это вступит в силу!

Пример

Пример 1

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

a:hover {
  background-color: yellow;
  font-size: 18px;
}

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

Пример 2

Выберите и установите стиль элементов <p>, <h1> и <a> при наведении мыши:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

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

Пример 3

Выберите и установите стили для ссылок, не найденных, просмотренных, наведенных и активных:

/* Ненайденная ссылка */
a:link {
  color: green;
}
/* Прогляденная ссылка */
a:visited {
  color: green;
}
/* Ссылка при наведении мыши */
a:hover {
  color: red;
}
/* Активная ссылка */
a:active {
  color: yellow;
}

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

Пример 4

Установить различные стили для ссылок:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

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

Пример 5

Наведите мышь на элемент <span>, чтобы показать элемент <div> (например, подсказка):

div {
  display: none;
}
span:hover + div {
  display: block;
}

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

Пример 6

Показывать и скрывать меню "выпадающее" при наведении мыши:

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 синтаксис

:hover {
  cssdeclarations;
}

Технические детали

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.

Связанные страницы

Учебник:CSS ссылки

Учебник:CSS псевдоклассы