Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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

Поддержка браузерами

12.0+ 7.0+ 2.0+ 4.0+ 9.6+ 3.1+

Описание

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

В качестве примера работы динамического (применение стилей в ответ на какие-либо действия) псевдо-класса можно рассмотреть пример подсветки элементов:

body *:hover { background-color: yellow; }

Применив это правило, любой элемент, являющийся потомком элемента <body>, будет менять задний фон на желтый, при наведении на него курсора мыши.

Примечание: псевдо-класс :hover должен быть расположен после псевдо-классов :link и :visited (если они используются).

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      body *:hover { background-color: aqua; }
    </style>
  </head>

  <body>
    <a href="#">Ссылка</a>
    <h3>Заголовок</h3>
    <p>Абзац</p>

  </body>
</html>

Результат данного примера:

Ссылка

Заголовок

Абзац

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru