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

❮ Назад Вперед ❯

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

Псевдоклассы :link, :active или :visited переопределяют стиль, указанный псевдоклассом :hover.

Многие сенсорные экраны не поддерживают :hover.

Версия

CSS1

Синтаксис

:hover {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a:hover {
      background-color: #8ebf42;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства :hover</h2>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

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

В вышеприведенном примере наведите курсор мыши на ссылку и цвет изменится.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a {
      color: #1c87c9;
      }
      a:hover {
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :hover</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и <a href="#"> вэб-дизайне</a>. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в<a href="#">электронный</a> дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа <a href="#">Aldus PageMaker</a> , в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

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

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 30px;
      background-color: #8ebf42;
      color:#eee;
      }
      div:hover {
      background-color: #666;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :hover</h2>
    <div>
      Lorem Ipsum - это текст-"рыба"...
    </div>
  </body>
</html>