After hover: Сочетание с псевдоклассами | WebReference

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

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

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

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

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

BCD tables only load in the browser

Last modified: 10 окт. 2022 г., by MDN contributors

html — Что такое :hover::after?

Я следил за учебным пособием на YouTube, в котором использовался эффект наведения CSS, поэтому, когда вы наводите курсор на элементы панели навигации, линия постепенно появлялась из центра. Как работает :hover::after?

Это код CSS, который они показали в видео:

 nav{
  дисплей: гибкий;
  набивка: 2% 6%;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  положение: липкое;
}
навигационное изображение{
  ширина: 150 пикселей;
}
.nav-ссылки{
  гибкий: 1;
  выравнивание текста: вправо;
  зазор: 2рем;
}
.nav-ссылки ул ли {
  стиль списка: нет;
  отображение: встроенный блок;
  отступ: 8px 12px;
  положение: родственник;
}
.nav-ссылки на ли {
  цвет: #ffffff;
  размер шрифта: 13px;
  текстовое оформление: нет;
}
.nav-links ul li a::after{
  содержание: '';
  ширина: 0%;
  высота: 2 пикселя;
  фон: #f44336;
  дисплей: блок;
  маржа: авто;
  переход: 0,5 с;
}
.nav-links ul li a:hover::after{
  ширина: 100%;
}```
 

• html
• css
• css-переходы

2

::after и :hover являются псевдоэлементами. Если у вас есть: hover, следующие стили будут применяться к элементу при наведении на него курсора. Но когда у вас есть: hover:: after, следующие стили будут применяться к псевдоэлементу :: after при наведении курсора на элемент. В этом случае псевдоэлемент ::after представляет расширяющуюся строку. И кстати, чтобы было понятно, что такое ::after, в CSS с помощью

0

При наведении курсора на элемент в теге case вы применяете стиль к псевдоэлементу ::after. В примере кода я вижу, что вы даете псевдоэлементу значение 100%, и таким образом вы меняете начальное значение ширины, равное 0,9.0003

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google