: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; }

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

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

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

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>
(adsbygoogle = window.adsbygoogle || []).push({});

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

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

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

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

Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

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 by MDN contributors.

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

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

Демо

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

до правил :link и :visited, но после :active, как определено в LVHA-порядке: :link:visited:hover:active.

Псевдокласс :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

Наведите курсор

Попробуй сам »

Вы можете добавить текст наведения (также известный как всплывающая подсказка) к ссылке в HTML, используя атрибут title . Атрибут title указывает дополнительную информацию об элементе и отображается в виде всплывающей подсказки, когда пользователь наводит указатель мыши на элемент.

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

 

  <голова>
    Название документа
  
  <тело>
     

Пример

W3docs

Попробуй сам »

В этом примере у нас есть тег привязки ( ), который ссылается на https://w3docs.com . Мы добавили в тег атрибут title , который содержит текст при наведении курсора «Нажмите, чтобы посетить W3docs.com». Когда пользователь наводит курсор на ссылку, этот текст будет отображаться в виде всплывающей подсказки.

Вы можете настроить текст при наведении так, как хотите, и вы можете применить эту технику к любому элементу HTML, который поддерживает заголовок атрибут.

Атрибут title — это стандартный HTML-атрибут, поддерживаемый всеми современными веб-браузерами, включая Chrome, Firefox, Safari, Opera и Edge. Он также поддерживается более старыми браузерами, начиная как минимум с Internet Explorer 6.

Однако стоит отметить, что некоторые вспомогательные технологии, такие как программы чтения с экрана, могут не объявлять атрибут title по умолчанию, и некоторые пользователи могут отключил отображение всплывающих подсказок в настройках своего браузера. В результате обычно рекомендуется использовать атрибут title экономно и предоставлять любую важную информацию в содержании самой страницы, а не полагаться исключительно на всплывающие подсказки.

Как увеличить изображение при наведении курсора в HTML

Abdul Muizz

Grokking the Behavioral Interview

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

Обзор

В этом ответе мы научимся увеличивать изображение при наведении, используя HTML в сочетании с CSS. Разработчики обычно делают это, чтобы сделать свою веб-страницу более привлекательной и удобной для пользователя. Анимации, как правило, увлекательны при правильном использовании и значительно влияют на пользовательский опыт.

Вот визуализация, показывающая, чего мы пытаемся достичь:

При наведении мыши маленькое изображение слева должно увеличиться, как показано справа

Шаги

Мы можем предпринять следующие шаги для решения нашей проблемы:

  1. Во-первых, используйте HTML-тег , чтобы добавить изображение в код.
  2. Затем используйте псевдокласс :hover и соответствующим образом измените CSS, чтобы увеличить изображение.
  3. Мы также должны использовать свойства CSS transition и transform для достижения нашей цели.

Свойство transition используется для управления скоростью анимации, применяемой с помощью преобразовать свойство.

Принимая во внимание, что для увеличения изображения необходимо использовать свойство transform вместе со свойством scale .

Синтаксис


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

 

Здесь атрибут src в теге используется для определения источника изображения.

Упомянутые выше свойства CSS изменяются с использованием приведенного ниже синтаксиса:


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

Примечание : Чтобы изучить свойство CSS transition , перейдите по этой ссылке.

Давайте теперь разберемся с некоторыми значениями, которые используются вместе с transform property :

Пример

Следующий фрагмент кода помогает нам понять, как увеличить изображение при наведении:

Примечание: Чтобы просмотреть исходный код, перейдите на вкладки HTML и CSS в виджете кода ниже.

Увеличение изображения при наведении в HTML

Объяснение

Ниже приводится объяснение кода, представленного в файле HTML: