Css a hover: HTML и CSS с примерами кода

Содержание

HTML и CSS с примерами кода

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

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

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

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

Замечания по использованию

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

Псевдоклассы

Синтаксис

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

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

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

Пример 1. Выпадающее меню

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

Смотрите полный пример выпадающего меню, основанный на 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>) для создания двухуровневого меню. Результат:

См. также

Ссылки

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

HTML и CSS с примерами кода

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

Замечания по использованию

Псевдоклассы

Синтаксис

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

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

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

Пример 1. Выпадающее меню

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

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

Пример 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>

Пример 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 ^{MDN (рус.)}

HTML и CSS с примерами кода

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

Замечания по использованию

Псевдоклассы

Синтаксис

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

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

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

Пример 1. Выпадающее меню

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

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

Пример 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>

Пример 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 ^{MDN (рус.)}

HTML и CSS с примерами кода

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

Замечания по использованию

Псевдоклассы

Синтаксис

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

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

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

Пример 1. Выпадающее меню

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

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

Пример 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>

Пример 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 ^{MDN (рус.)}

Решение проблемы с CSS :hover. Поговорим о псевдоклассе :hover… | by Саша Азарова | NOP::Nuances of Programming

.hummingbird:hover {}

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.

Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.

“Хм … а в чем, собственно говоря, заключается проблема?”

Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!

Пример элементов с :hover на десктопе. Источник: https://proper-hovering.glitch.me

Однако на сенсорном экране с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.

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

Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.

“Не может же быть, чтобы эту проблему не пытались как-то решить…”

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

body.nontouch nav a:hover {
background: yellow;
}

Однако подобное решение имеет несколько недостатков:

Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.

Media Queries Level 4

Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.

Четвертый уровень медиазапросов включает в себя: hover,any-hover, pointer, any-pointer. Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover.

Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.

«Так что же делать?»

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

Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.

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

Перевод статьи Mezo Istvan: Finally, a CSS only solution to :hover on touchscreens

Решение проблемы с CSS :hover

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.

“Хм … а в чем, собственно говоря, заключается проблема?”

“Не может же быть, чтобы эту проблему не пытались как-то решить…”

body.nontouch nav a:hover {
    background: yellow;
}

Однако подобное решение имеет несколько недостатков:

Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.

Media Queries Level 4

«Так что же делать?»

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

С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.

Перевод статьи Mezo Istvan: Finally, a CSS only solution to :hover on touchscreens

CSS-селектор :not. Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Например:

p:not(.classy) { color: red; }

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li {  }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li {  }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри . content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li {  }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li {  }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.


ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

Но если придется обнулять слишком много свойств, то есть смысл использовать :not.


ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

Как и в предыдущем примере, желаемого можно добиться несколькими способами.

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
. menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.


img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}


ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

CSS | : Селектор наведения — GeeksforGeeks

CSS | : hover Selector

Этот селектор используется для стилизации элементов при наведении на них указателя мыши. Его можно использовать на любом элементе.

Синтаксис:

element: hover {
Объявления CSS;
}

Пример-1: изменение цвета фона при наведении курсора на элемент.

< html >

< головка >

стиль >

h2: парение {

цвет: белый;

цвет фона: зеленый;

}

стиль >

головка >

< корпус

2>

< h2 выровнять = «центр» > навести h2 >

корпус >

html >

Выход:
Начальный:

Пример:

On Hover:

Отображение скрытого блока при наведении курсора на текст.

< html >

< головка >

стиль >

ul {

дисплей: нет;

}

div {

фон: зеленый;

ширина: 200 пикселей;

высота: 200 пикселей;

отступ: 20 пикселей;

padding-left: 50px;

размер шрифта: 30 пикселей;

цвет: белый;

дисплей: нет;

}

h4: hover + div {

дисплей: блок;

}

стиль >

головка >

< корпус

2>

< h4 выровнять = «по центру» >

Наведите курсор, чтобы увидеть скрытые GeeksforGeeks.

h4 >

< div >

GeeksforGeeks

2 div

>

кузов >

html >

Выход:
Начать:

Пример 3: изменение цвета шрифта при наведении курсора на элемент.

< html >

< головка >

стиль >

h2: парение {

цвет: красный;

}

стиль >

головка >

< корпус

2>

< h2 выровнять = «центр» > навести h2 >

корпус >

html >

Выход:
Начальный:

Пример изменения:

семейство шрифтов текста при наведении на него курсора.

< html >

< головка >

стиль >

h2: hover {

font-family: monospace;

}

стиль >

головка >

< корпус

2>

< h2 выровнять = «центр» > навести h2 >

корпус >

html >

Вывод:
Начальный:

Пример:

On Hover:

Изменение оформления текста на подчеркивание при наведении курсора на элемент.

< html >

< головка >

стиль >

h2: наведение {

текстовое оформление: подчеркивание;

}

стиль >

головка >

< корпус

2>

< h2 выровнять = «центр» > навести h2 >

корпус >

html >

Вывод:
Начальный:

On Hover:

Google Chrome 4.0

Internet Explorer 7.0

Mozilla firefox 2.0

Safari 3.1

Opera 9.6

CSS hover изменить себя и другой класс

CSS hover изменить себя и другой класс - 2 ответа

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил
3 года, 3 месяца назад

Просмотрено
4к раз

Я знаю, что на есть масса ответов: hover , влияющих на другие классы.Я пытаюсь изменить цвет самого шрифта ( .footer_status_tex ) и background-color другого класса ( .footer_status_gear )

Упрощенный CSS - Примерно так:

УСС

  .footer_status_tex {
    курсор: указатель;
    цвет: #fff;
}
.footer_status_gear {
    ширина: 36 пикселей;
    высота: 36 пикселей;
    цвет фона: # 000;
}

.footer_status_tex: hover {
    цвет: # 81aaf3;
}
.footer_status_tex: при наведении курсора.footer_status_gear {
    цвет фона: # aba51e;
}

HTML

   Здравствуйте

Текущая настройка изменяет только цвет шрифта.

Спасибо

Создан 03 фев.

NewCodeManNewCodeMan

21144 серебряных знака1414 бронзовых знаков

Сначала нужно закрепить селектор .footer_status_tex: hover , убрать пробел после : .

Во-вторых, селектор .footer_status_tex: hover .footer_status_gear работает, только если последний является потомком первого.

Вам понадобится .footer_status_tex: hover + .footer_status_gear или ~ , если последний является родственником первого, а также последний должен быть помещен рядом с первым в DOM.

  .footer_status_tex: hover {
  цвет: # 81aaf3;
}

.footer_status_tex: hover + .footer_status_gear {
  цвет фона: # aba51e;
  высота: 20 пикселей;
}

   Здравствуйте

Создан 03 фев.

Наклейки

6,3k1717 золотых знаков114114 серебряных знака156156 бронзовых знаков

Вы можете использовать ~ смежный селектор для нацеливания на соседние элементы

Фрагмент стека

 .footer_status_tex {
  курсор: указатель;
  цвет: #fff;
}

.footer_status_gear {
  ширина: 36 пикселей;
  высота: 36 пикселей;
  цвет фона: # 000;
}

.footer_status_tex: hover {
  цвет: # 81aaf3;
}

.footer_status_tex: hover ~ .footer_status_gear {
  цвет фона: # aba51e;
}

   Здравствуйте

Создан 03 фев.

Бхуван

15.4k44 золотых знака2626 серебряных знаков5050 бронзовых знаков

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

Я предполагаю, что это ваша структура: https://codepen.io/barrymcgee/pen/vdGOra?editors=1100#

Причина, по которой фон .footer_status_gear не меняется, потому что это родительский элемент ссылки. Псевдокласс : hover может направлять только потомков элемента, к которому он применяется.

Если предположение, которое я сделал о вашей структуре HTML, неверно, предоставьте его, и я посмотрю еще раз.

Создан 03 фев.

Барри МакГиБарри МакГи

34322 серебряных знака1111 бронзовых знаков

Не тот ответ, который вы ищете? Посмотрите другие вопросы с метками css hover или задайте свой вопрос.

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Изменение изображения при наведении курсора с помощью CSS

Чтобы поменять местами изображение, когда пользователь наводит на него курсор, наиболее распространенный и эффективный метод - поместить два изображения в один и тот же контейнер, сделав изображение «ролловера» прозрачным по умолчанию.Когда пользователь наводит курсор на контейнер, изображение «наведения курсора» становится непрозрачным.

Наведите указатель мыши на это изображение, чтобы увидеть эффект наведения изображения в действии:

Этот эффект при наведении курсора был достигнут исключительно с помощью CSS и HTML.

Используйте CSS для обмена изображениями

Следующие стили CSS показывают, как изменить изображение при наведении курсора:

<стиль>
    / *
      Ролловер изображение
     * /
    .фигура {
        положение: относительное;
        ширина: 360 пикселей; / * может быть опущено для обычного неленивого изображения * /
        максимальная ширина: 100%;
    }
    .figure img.image-hover {
      позиция: абсолютная;
      верх: 0;
      справа: 0;
      слева: 0;
      внизу: 0;
      соответствие объекта: содержать;
      непрозрачность: 0;
      переход: непрозрачность .2с;
    }
    .figure: hover img.image-hover {
      непрозрачность: 1;
    }

Используйте HTML для выбора изображений

Ниже приведен HTML-код, который устанавливает 2 изображения, используемые в эффекте ролловера. Существует два метода: либо с помощью отложенной загрузки адаптивных изображений с «идеальным размером пикселя», либо с использованием изображений фиксированного размера, которые масштабируются в соответствии с размером в браузере.

Рекомендуемый метод - с отложенной загрузкой адаптивных изображений с оптимальным размером пикселей (без масштабирования в браузере):

Альтернативный метод - без отложенной загрузки изображений, с использованием изображений фиксированного размера (которые можно масштабировать, чтобы поместиться на устройствах с маленьким экраном):

Рекомендуемый метод - со ссылкой:

Помогло ли это руководство понять, как можно использовать CSS для изменения изображения (при наведении) и создания эффекта наведения изображения с помощью Sirv? Пожалуйста, дайте нам знать ниже.

Справочное руководство CSS: CSS: селектор наведения

Chidume Nnamdi Подписаться
Я инженер-программист с опытом работы более 6 лет.Я работал с разными стеками от WAMP до MERN и MEAN. Я предпочитаю JavaScript; фреймворки - Angular и Nodejs.

30 сентября, 2020

37 сек на чтение
174

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

Вот пример реализации:

 a: hover {
    цвет: оранжево-красный;
}

Мы применили псевдоселектор : hover ко всем элементам и .Это сделает цвет текста элемента и оранжево-красным при наведении курсора мыши на элемент.

Вы можете поиграть с живым примером на CodePen ниже:

См. Pen
css: hover, автор - Chidume David (@ philipsz-davido)
на CodePen.

Мы также можем применить селектор : hover ко всем элементам тела:

 body *: hover {
    фон: желтый;
}

Это приведет к тому, что все элементы внутри основного элемента будут отображать желтый фон, когда мышь перемещается по элементам.

В дополнение к фону мы также можем изменить границу, радиус границы, шрифт, цвет текста, отступы, поля и т. Д.

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

 *: hover {
    граница: 1px сплошной оранжево-красный;
}

Это приведет к тому, что границы наведенных элементов будут иметь ширину 1 пиксель, сплошной красно-оранжевый цвет.

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера.Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket. Https://logrocket.com/signup/

LogRocket похож на DVR для веб-приложений , записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить пользовательские сеансы вместе с состоянием приложения, регистрировать сетевые запросы и автоматически обнаруживать все ошибки.

Модернизируйте отладку веб-приложений - начните мониторинг бесплатно.

Chidume Nnamdi Подписаться
Я инженер-программист с опытом работы более 6 лет. Я работал с разными стеками от WAMP до MERN и MEAN. Я предпочитаю JavaScript; фреймворки - Angular и Nodejs.

Справочное руководство CSS: border »

Hover Effects with CSS Hero

Создание уникального веб-сайта - это вопрос выбора правильных цветов, сочетания правильных шрифтов и настройки всех деталей, чтобы он выделялся .

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

Каждый раз, когда пользователь просматривает ваш веб-сайт с помощью мыши, он выполняет действие hover над некоторыми элементами на вашей странице, вызывая изменение статуса этих «зависших» элементов. Конечно, в этом статусе элементы стилизованы, и это называется «: hover». В CSS Hero 3.3 мы представили коллекцию фрагментов кода, чтобы вы могли легко добавлять эффекты к элементам при наведении курсора. Конечно, мы рекомендуем использовать их для элементов с гиперссылками, таких как ссылки, кнопки или любой другой элемент, который, по вашему мнению, может потребовать внимания пользователя при наведении указателя мыши.

Чтобы применить эффект наведения, просто запустите CSS Hero, щелкните элемент (ы), к которым должен быть применен эффект наведения, и перейдите на панель Snippets , здесь вы найдете вкладку Hover Effects , попробуйте один Что вам больше подходит, нажмите Применить , и все готово. Теперь вы можете попробовать навести курсор на этот элемент, чтобы увидеть эффект наведения в действии.

Вы можете выбирать среди множества различных эффектов, которые вы можете протестировать здесь, и все они поддерживаются фантастическим Hover.css , автор Ian Lunn .

Hover Me

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

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

Элементы зависают, когда пользователь наводит указатель мыши на элемент. Он не активирует указывающее устройство.

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

Многие сенсорные устройства не поддерживают: hover, потому что у него есть проблемы с сопоставлением.

Версия¶

Селекторы уровня 3

Селекторы уровня 4

Синтаксис¶

 : hover {
  объявления css;
}

Пример псевдокласса: hover: ¶

  

  
     Название документа 
    <стиль>
      a: hover {
        цвет фона: # 8ebf42;
        цвет: # 666;
      }
    
  
  
    : пример селектора при наведении 
    W3docs.com

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

Наведите указатель мыши на ссылки, чтобы увидеть, как меняется цвет.

Пример псевдокласса: hover с тегом

: ¶

  

  
     Название документа 
    <стиль>
      a {
        цвет: # 1c87c9;
      }
      a: hover {
        цвет фона: # 8ebf42;
        цвет: #eee;
      }
    
  
  
    : пример селектора при наведении 
     Lorem Ipsum - это просто фиктивный текст полиграфической и  верстки .Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта. Он пережил не только пять веков, но и скачок в  электронный  набор текста, оставшись практически неизменным. Он был популяризирован в 1960-х годах с выпуском листов Letraset, содержащих отрывки Lorem Ipsum, а в последнее время - с помощью программного обеспечения для настольных издательских систем, такого как  Aldus PageMaker , включая версии Lorem Ipsum.

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

Пример псевдокласса: hover с тегом

: ¶
Название документа <стиль> div { отступ: 30 пикселей; цвет фона: # 8ebf42; цвет: #eee; } div: hover { цвет фона: # 666; цвет: #fff; } : пример селектора при наведении Lorem ipsum - это просто фиктивный текст...
Попробуйте сами »
CSS: hover Selector
Пример
Выбор и стиль ссылки при наведении на нее курсора:
а: парение
{
цвет фона: желтый;
}
Попробуй сам "
Дополнительные примеры "Попробуйте сами" ниже.
Определение и использование
Селектор: hover используется для выбора элементов при наведении на них указателя мыши.
Совет: Селектор: hover можно использовать для всех элементов, а не только
по ссылкам.
Совет: Используйте селектор: link для стилизации ссылок на
непосещенные страницы, селектор: посещенный для стиля
ссылки на посещенные страницы, и
: активный селектор для стилизации активной ссылки.
Примечание: : hover ДОЛЖЕН стоять после: link и: loaded (если они присутствуют) в определении CSS, чтобы быть эффективным!
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: парение 4,0 7,0 2,0 3,1 9,6
Примечание: В IE должен быть объявлен
чтобы селектор: hover работал с другими элементами, кроме элемента .
Синтаксис CSS
: hover {
css декларации ;
}
Демо
Другие примеры
Пример
Выбор и стиль элемента
,
и
при наведении на него курсора:
p: hover, h2: hover, a: hover {
background-color: желтый;
}
Попробуй сам "
Пример
Выбор и стиль непосещенных, посещенных, наведенных и активных ссылок:
/ * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}
/ * посещенная ссылка * /
a: посетил {
цвет: зеленый;
}
/ * навести курсор мыши
ссылка * /
a: наведение {
цвет: красный;
}
/ *
выбранная ссылка * /
а: активный {
цвет: желтый;
}
Попробуй сам "
Пример
Стили ссылок с разными стилями:
а.ex1: hover, a.ex1: active {
цвет: красный;
}
a.ex2: hover, a.ex2: active {
font-size: 150%;
}
Попробуй сам "
Пример
Наведите указатель мыши на элемент , чтобы отобразить элемент
(например, всплывающую подсказку):
div {
дисплей: нет;
}
span: hover + div {
display: block;
}
Попробуй сам "
Пример
Показать и скрыть раскрывающееся меню при наведении курсора мыши:
ul {
дисплей: встроенный;
маржа: 0;
отступ: 0;
}
ul li {display: inline-block;}
ul li: hover
{background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
позиция: абсолютная;
ширина: 200 пикселей;
дисплей: нет;
}
ul li ul li {
справочная информация:
# 555;
дисплей: блочный;
}
ul li ul li a {display: block
! important;}
ul li ul li: hover {background: # 666;}
Попробуй сам "
Связанные страницы
Учебник
CSS: ссылки CSS
Учебное пособие по CSS: Псевдоклассы CSS
.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Навигация по записям
Previous PostДобавить ссылку добавить сайт: Как добавить ссылки на сайт WordPress
Next PostЩо таке блютуз: Что такое Bluetooth и как он работает? | Происхождение названия Bluetooth | С чего начался Bluetooth? | Основные положения технологии Bluetooth | Принцип работы Bluetooth | Структурная схема архитектуры Bluetooth | RF | Baseband Layer = Link Controller + Baseband Manager + Device Manager | Link Manager