Html hover: :hover ⚡️ HTML и CSS с примерами кода

:hover — CSS | MDN

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover после правил :link и :visited до :active, как определено LVHA-порядком: :link — :visited — :hover — :active.

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

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Примечание: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.

:link:hover { outline: dotted red; }
.foo:hover { background: gold; }

Выпадающее меню

С псевдоклассом

div. menu-bar ul ul {
  display: none;
}
div.menu-bar li:hover > ul {
  display: block;
}

применим к HTML структуре типа следующей:

<div>
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a href="example.html">Подменю</a>
          <ul>
            <li>
              <a href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный пример выпадающего меню, основанный на CSS.

Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Примечание: Для аналогичного эффекта, но основанного на псевдоклассе:checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 11 февр. 2023 г. by MDN contributors.

:hover ⚡️ HTML и CSS с примерами кода

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

Демо

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover

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

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

• :active
• :any-link
• :blank
• :checked
• :current()
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

• WHATWG HTML Living Standard
• Selectors Level 4
• Selectors Level 3
• CSS Level 2 (Revision 1)

Описание и примеры

Пример 1.

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

CSSHTML

div.menu-bar ul ul {
  display: none;
}
div.menu-bar li:hover > ul {
  display: block;
}

<div>
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a href="example.html"
            >Подменю</a
          >
          <ul>
            <li>
              <a href="example.html"
                >Подменю</a
              >
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.  html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.  html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      . 
  brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3. html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

• :link
• :visited
• :active

Ссылки

• Псевдо-класс :hover ^{MDN (рус.)}

Как добавить текст при наведении курсора с помощью HTML

Можно добавить текстовое описание при наведении курсора без Javascript и даже без CSS. Давайте посмотрим, как мы можем это сделать, используя только HTML.

Чтобы добавить текст при наведении, вам нужно использовать атрибут title. В этом фрагменте мы будем использовать его для элементов

 

  <голова>
    
  
  <тело>
     
Пример
 
    
Наведите указатель мыши на этот текст, чтобы увидеть результат. 
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
    Наведите курсор на этот текст, чтобы увидеть результат.
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
    HTML
    
Наведите курсор
  
 

 

  <голова>
    
  
  <тело>
     
Пример
 
    W3docs
  
 

 // Используется для добавления изображения в код

 

 // Используется для управления скоростью анимации и ее продолжительностью.
картинка {
переход: свойство продолжительности, временная функция, задержка | начальная | наследование;
}
//Это свойство используется для изменения свойств изображения при наведении
изображение: наведите {
преобразование: нет|функции преобразования| первоначальный|наследовать;
}