A hover css: :hover | CSS (Примеры)

Содержание

:hover | 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 (рус.)}

:hover | CSS (Примеры)

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

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

На сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :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 (рус.)}

:hover | 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 (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения «underline», «overline», «line-through», «none». Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку:

<a href="/">MouseDC.ru</a>

Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):

MouseDC.ru

overline ставит линию над текстом

<a href="/">MouseDC.ru</a>

результат:

MouseDC.ru

line-through перечёркивает текст посередине

<a href="/">MouseDC.ru</a>

результат:

MouseDC.ru

underline подчёркивает текст снизу (это значение по умолчанию в браузерах)

<a href="/">MouseDC.ru</a>

результат:

MouseDC.ru

none убирает подчёркивание:

<a href="/">MouseDC.ru</a>

результат:

MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: «:hover» — это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:

a:hover{
   font-size: 30px;
   color: red;
}

Псевдокласс «:hover» есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.

«:active» — указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

«:visited» — указывает на то, что пользователь уже переходил по этой ссылке.

«:link» — псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса «:visited«.

a:visited {
   color: green;
}

Красивый hover эффект для карточки на сайте на чистом CSS

В данной записи мы опять рассмотрим интересную реализацию карточки на сайте. Анимация срабатывает при наведение курсора на элемент. Демонстрация этого эффекта ниже.

HTML

Здесь 3 основных элемента:
card-container — это основной контейнер внутри которого находится вся информация.
card--display — внутри находится информация которая будет выводиться на лицевой стороне блока.
card--hover — здесь находится информация которая будет выводиться при наведение курсора на элемент.

<div>
       <div>
           <a href="">
               <div>
                   <i>PROG-TIME</i>
                   <h3>Делаем необычную анимацию для карточки</h3>
               </div>
               <div>
                   <h3>Внимание</h3>
                   <p>Весь код представленный в видео находится на сайте prog-time.ru. Ссылка на запись в описание.</p>
               </div>
           </a>
           <div></div>
       </div>
   </div>

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

Вам также будет интересно

Последние записи

seodon.ru | CSS справочник — :hover

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: В CSS не определено к каким элементам можно применять псевдокласс :hover, но все браузеры его поддерживают для тега <A>, также многие поддерживают и для других тегов, например, <DIV>.

Псевдокласс :hover должен указываться перед :active, если тот присутствует. А если он используется для ссылок то после :link и :visited. В противном случае :hover может не сработать.

Значения

Нет.

Синтаксис

селектор:hover {  }

Пример CSS: использование :hover

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :hover</title>
  <style type="text/css">
   a:link    { color:#0066cc } /* цвет непосещенных ссылок */
   a:visited { color:#0066cc } /* посещенных */
   a:hover   { color:#66cc00 } /* ссылок под курсором */
   a:active  { color:#ff0000 } /* в момент активации */
  </style>
 </head>
 <body>
  <p><a href="http://spravka.seodon.ru/css/">Справочник CSS</a></p>
  <p><a href="http://spravka.seodon.ru/html/">Справочник HTML</a></p>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS :hover.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Нет	Нет	Да

Браузеры

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

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

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

30 сентября, 2020 37 сек на чтение 174

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

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

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

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

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

См. Pen
css: hover авторства Чидум Дэвид (@ philipsz-davido)
на CodePen.

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

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

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

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

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

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

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

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

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

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

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

Что такое CSS-анимация при наведении курсора и как ее использовать?

CSS-анимации и переходы могут персонализировать ваш сайт и создать приятные впечатления для посетителей. Когда посетитель веб-сайта наводит курсор на анимированный элемент, например ссылку или кнопку, он может менять цвет, увеличиваться, уменьшаться, вращаться и т. Д. В зависимости от того, как вы его закодировали.Это приятно для посетителя и показывает, что ваш сайт работает.

Благодаря CSS интерфейсные разработчики теперь могут создавать анимацию и переходы без JavaScript или Flash. Это означает, что создание такой интерактивности стало проще и дешевле, чем раньше.

Как анимация CSS, так и свойства перехода могут быть указаны с помощью псевдоклассов, которые определяют особое состояние элемента. Только в этом состоянии элемент изменится с одного стиля на другой.Псевдоклассы включают:

: hover — когда пользователь наводит курсор на элемент
: фокус — когда пользователь щелкает или касается элемента, или выбирает его с помощью клавиши Tab на своей клавиатуре
: активный — когда пользователь нажимает на элемент
: цель — когда пользователь нажимает на другой элемент

Из приведенных выше псевдоклассов: hover является наиболее распространенным.

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

Что такое CSS-анимация наведения?

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

Взгляните на пример ниже. Если вы наведете курсор на div, он постепенно изменится от светло-розового до темно-розового.

Хотя это похоже на анимацию, на самом деле это переход.Эти два термина часто используются как синонимы, но анимация и переходы различаются.

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

С другой стороны, анимация

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

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

Давайте посмотрим на анимацию отскока ниже.

Отскок при наведении

Чтобы привлечь внимание посетителя вашего веб-сайта, вы можете создать эффект отскока, когда пользователь наводит курсор на элемент. Все, что вам нужно сделать, это определить некоторые свойства анимации и ключевые кадры.Позже в этом посте мы рассмотрим, как создать анимацию шаг за шагом; а пока мы просто кратко рассмотрим этот пример.

В приведенном ниже примере я помещаю div в гибкий контейнер. Таким образом, он будет отражаться только в этой определенной области контейнера и не будет перекрываться с заголовком или абзацем.

Затем я определю анимацию, которая завершит отскок за две секунды и будет работать бесконечно (пока пользователь продолжает наводить курсор на div). Я также установил для него время , легкость , чтобы анимация начиналась медленно, ускорялась, а затем замедлялась.

Наконец, я определю три ключевых кадра. Первый установит начальное состояние анимации. В 0% , или в первый момент последовательности анимации, элемент будет в 0 пикселей по оси Y. При 50% или на середине последовательности анимации элемент переместится на 100 пикселей вверх по оси Y. При 100% или в конце последовательности анимации он вернется туда, где он был начат по оси Y, завершив свой отскок.

Посмотрите на результат ниже.

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

Теперь, когда мы более знакомы с CSS-анимацией наведения и переходами, давайте посмотрим, зачем вам тратить время и ресурсы на их создание.

Как использовать CSS при наведении

Использование псевдокласса: hover в CSS имеет несколько потенциальных преимуществ.

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

Источник изображения

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

Вы также можете использовать эффект наведения, чтобы побудить посетителей совершить действие на вашем сайте. Например, увеличение размера кнопки, когда пользователь наводит на нее курсор, может помочь убедить его отправить форму, совершить покупку или выполнить любой призыв к действию, о котором говорится в кнопке. Это также может побудить их нажимать на элементы, отличные от кнопок, например, на значки социальных сетей.Ниже приведен пример Адама Моргана.

Однако важно отметить, что псевдокласс: hover не всегда работает должным образом на сенсорных экранах. Элемент может никогда не начать свой переход или эффект анимации, когда пользователь наводит на него курсор. Или он может остановиться через мгновение после того, как пользователь наводит курсор на элемент. Или он может непрерывно воспроизводить свою анимационную последовательность в цикле, даже если пользователь больше не наводит курсор на нее, и останавливаться только после того, как пользователь наводит курсор или щелкает на другом элементе.Его поведение зависит от браузера.

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

Как создать анимацию наведения курсора CSS

Вот как настроить CSS-анимацию наведения на элемент:

1. Настройте свойство анимации.

Используйте свойство анимации или его подсвойства для стилизации элемента.

Обратите внимание, что здесь настраивается только продолжительность, время и другие детали того, как будет развиваться последовательность анимации. Чтобы фактически начать последовательность анимации и заставить элемент двигаться, вам нужно установить правило @keyframes .

2. Определите подсвойства свойства анимации.

Свойство анимации состоит из следующих подсвойств:

имя-анимации

Ат-правило @keyframes . имя-анимации. Объявление используется в качестве свойства, а имя анимации — в качестве значения свойства (например, имя-анимации: bounce; ).

продолжительность анимации

Это продолжительность одного цикла анимации. Он может быть установлен в секундах (с) или миллисекундах (мс) (например, animation-duration: 3s;) .

функция синхронизации анимации

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

задержка анимации

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

Допускаются отрицательные значения. Если установлено отрицательное значение, анимация запускается, как если бы она уже воспроизводилась.Например, в animation-delay: -2s; , анимация будет вести себя так, как если бы она начала воспроизводиться 2 секунды назад.

количество итераций анимации

Это количество повторов анимации. Вы можете определить его как бесконечное , чтобы повторять анимацию бесконечно. Значения свойств следующие: число (значение по умолчанию — 1), бесконечное, начальное (устанавливает для свойства значение по умолчанию) и наследование.

направление анимации

Настраивает начальную точку последовательных циклов.Анимация может менять направление или сбрасываться и повторяться. Значения свойств: нормальный (воспроизведение вперед), обратное (воспроизведение назад), альтернативное (воспроизведение вперед, затем назад), альтернативно-обратное (воспроизведение назад, затем вперед), начальное и наследование.

режим заливки анимации

Это значения, применяемые элементом, когда анимация не воспроизводится (т.е. перед первым ключевым кадром и после воспроизведения последнего). Значения свойств: нет (по умолчанию, к элементу не применяются стили), вперед (элемент сохраняет значения стиля, заданные последним ключевым кадром), назад (элемент сохраняет значения, установленные первым ключевым кадром), оба (анимация следует правилам для обоих направлений. ), начальный и наследуемый.

состояние воспроизведения анимации

Определяет статус анимации (запущена или приостановлена). Это позволяет воспроизведенной анимации возобновить работу с того места, где она была приостановлена, а не начинать заново. Значения свойств: приостановлено, запущено, начальное значение и наследование.

3. Используйте ключевые кадры для определения последовательности CSS-анимации при наведении курсора.

После определения свойства анимации и дополнительных свойств необходимо настроить at-правило @keyframes . Это поможет вам установить по крайней мере два ключевых кадра, которые описывают, как анимация должна отображаться в определенных случаях во время последовательности.

Чтобы обеспечить лучшую поддержку во всех браузерах, правило @keyframes должно иметь префикс поставщика, как и все другие свойства перехода и анимации .

Префиксы поставщиков должны выглядеть так:

@ -moz-ключевые кадры

@ -o-ключевые кадры

@ -webkit-keyframes

Примечание: предыдущие примеры не имеют префикса поставщика, чтобы они выглядели как можно проще.

Чтобы указать различные точки останова по ключевым кадрам, используется <процент> , где 0% является первым моментом последовательности, а 100% — последним. Две точки также могут быть определены по их псевдонимам от и до соответственно.

Вы можете установить промежуточный момент на 50% и / или любые дополнительные точки останова, которые вам могут понадобиться.

Свойства для анимации ( слева, и сверху, ) перечислены внутри точек останова, как показано в примере Шэя Хоу ниже.

Обратите внимание, что можно анимировать только отдельные свойства.

Например, если вы хотите переместить элемент сверху вниз, пытаясь анимировать с top: 0; С по внизу: 0; не сработает.

Вместо этого вам нужно будет анимировать с top: 0; С по верхний: 100%; .

4. Используйте сокращение CSS Hover Animation.

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

По порядку, вот как должны отображаться значения в свойстве animation : название-анимации, продолжительность-анимации, функция-времени-анимации, задержка-анимации, количество итераций-анимации, направление анимации, заливка-анимации. режим и состояние воспроизведения анимации.

Теперь, когда вы знаете, как создать CSS-анимацию при наведении курсора, давайте рассмотрим несколько примеров, которые вдохновят вас.

Примеры анимации наведения курсора CSS

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

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

1. Sass Hover Effects

Источник изображения

Этот разработчик делится примерами эффектов наведения, организованными по отраслям, включая сайты о путешествиях, фотографии и строительстве.Каждый из них поставляется с кодом, который вы можете установить в HTML и CSS своей страницы.

2. Эффекты при наведении курсора на кнопку

Источник изображения

Это набор из пяти эффектов при наведении курсора. Когда ваша мышь наводит курсор на кнопку, они реагируют анимацией. Все они удобны, просты и готовы к использованию на вашем веб-сайте или целевой странице.

3. CSS-эффекты при наведении курсора на изображение

Вот пятнадцать эффектов наведения, которые добавляют жизни вашим изображениям. Есть такие, которые увеличивают и уменьшают масштаб, скользят и вращают.

4. Эффекты при наведении курсора на творческое меню

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

5. Эффект наведения значков социальных сетей

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

6. Анимация масштабирования при наведении курсора

Источник изображения

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

7. Переворот анимации при наведении курсора

Источник изображения

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

8. Поворот анимации при наведении курсора

Источник изображения

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

9. Приостановить анимацию при наведении курсора

Источник изображения

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

Добавление анимации наведения на ваш сайт

Интерактивность — ключ к обеспечению хорошего взаимодействия с пользователем в Интернете. CSS-анимация наведения и переходы — отличный способ улучшить интерактивность вашего сайта.Они могут не только сделать ваш сайт более интересным, но и предоставить важную информацию вашим посетителям и побудить их к действию на вашем сайте. Самое приятное: вам нужно только немного знать HTML и CSS, чтобы их создавать.

Создание всплывающих меню в CSS. Как построить меню наведения в чистом виде… | by Ken Reilly

CSS

Стили для примера проекта расположены в style.css :

Сначала идет блок : root , который содержит переменные CSS, которые будут использоваться в остальной части файла.Переменные — это мощная функция, представленная в CSS Level 3, которая значительно упрощает задачу организации кода CSS. Здесь у нас есть базовый размер для элементов навигации как --nav-size , который установит высоту и ширину закрытого меню навигации на 12vh (что составляет 12% от высоты области просмотра). Здесь также определяются цвета фона для меню.

Анимация с постепенным появлением элементов будет использоваться для отображения скрытых пунктов меню путем установки для их свойства display значения flex и постепенного появления элементов с непрозрачностью.

Затем создается стиль тела , масштабируется до 100% высоты и ширины документа и устанавливается для отображения содержимого в горизонтальном гибком контейнере. Элементы nav (корневые контейнеры для каждого меню) имеют значение --nav-size и имеют различные стили, а также определены как гибкие контейнеры, чтобы обеспечить правильный интервал между элементами меню. Обратите внимание на переход в селекторе без наведения этого элемента, который приведет к плавному переходу элемента в состояние по умолчанию (вместо того, чтобы просто немедленно вернуться назад).Селектор nav> header изменяет размер заголовка меню до --nav-size , и снова используется flex, в этом случае для центрирования текста внутри заголовка по горизонтали и вертикали.

Вот где мы начинаем непосредственно разбираться в логике наведения курсора на меню. Селектор nav: hover заставляет элемент nav при наведении на него менять цвет фона и высоту, используя линейные переходы 120 мс и 240 мс соответственно.Это демонстрирует, как несколько переходов могут быть объединены в одно правило CSS. Затем первые два меню выбираются с помощью псевдокласса nth-child, чтобы расширить их переходы до высоты , что приведет к тому, что меню будет открываться вертикально при активации. Элементы меню управляются с помощью nav> div и связанных селекторов, и эти элементы также настроены на центрирование своего собственного содержимого с помощью гибкости и реагируют на события наведения, применяя переходы и анимацию.

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

Третье меню использует совершенно другой подход и не меняет размер при наведении курсора, а вместо этого становится прозрачным и применяет эффекты к дочерним элементам, которые заставляют их отображаться в кружке вокруг меню.Этот классный эффект достигается за счет изменения размеров элементов меню до того же размера, что и у родительского элемента, с использованием позиции : фиксированное значение для размещения их вертикально друг над другом, поворота каждого элемента на 90 градусов, чтобы охватить меню, и применения transform: translateX (var (- nav-size)) в дочерний элемент span , который сдвинет span на одну «единицу размера навигации». Значки смайликов впоследствии поворачиваются по мере необходимости, чтобы переориентировать их в правильном направлении (поскольку при предыдущем повороте некоторые из них были повернуты боком, перевернуты и т. Д.).

Наконец, единственное решение CSS для: наведения курсора на сенсорные экраны | автор: Mezo Istvan

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

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

Парение на рабочем столе. Источник: https://proper-hovering.glitch.me

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

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

Однако становится еще хуже: после остановки перетаскивания эффект зависания остается активным!

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

Это определенно запутает некоторых ваших пользователей, а это никогда не бывает хорошо. Что-то нужно делать.

Что ж, такие есть, о большинстве из них рассказано в этой отличной статье.Лучший из них включает использование JavaScript для определения того, есть ли у экрана сенсорные возможности, применение класса к телу на основе этого, а затем явная ссылка на этот класс каждый раз, когда эффект : hover добавляется к любому элементу.

  body.nontouch   nav a: hover  {
 фон: желтый; 
}

У этого есть несколько проблем с самого начала:

Разработчик может создать сценарий обнаружения, который хорошо работает сегодня, но как насчет двух месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Я бы не стал беспокоиться об этом во время разработки.
Можно было бы подумать, что у сообщества JS есть готовый пакет, готовый и вооруженный только для этой проблемы, но это не так.
При использовании JS-фреймворка на основе компонентов с инкапсулированными стилями это решение просто бросает вызов. Каждый раз, когда используются эффекты наведения, стили этого компонента должны ссылаться на этот глобальный класс. Неудобно.
Не два проекта, в которых используется это решение, будут одинаковыми. Может, одно хорошо работает на специальном устройстве, а другое — нет.Должен быть стандартизированный способ решения этой проблемы.

Введите медиа-запросы уровня 4

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

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

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

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

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

Вот тестовый сайт, где вы можете протестировать свое собственное устройство, чтобы увидеть, какие из этих медиа-запросов применимы к нему, а также просмотреть некоторые из наиболее популярных настроек устройств.Браузеры на Android имеют некоторые несоответствия, но другие устройства, похоже, разобрались с ними. Проверяя эти различные устройства, он показывает, что таргетинг на ноутбуки возможен с помощью запроса @media (hover: hover) and (pointer: fine) {}.

  @media (hover: hover) and (указатель: отлично)  {
  nav a: hover  {
 фон: желтый; 
} 
}

Я что-то пропустил? Что вы обычно используете в таких случаях? Я вполне доволен этим решением, но дайте мне знать, если есть лучшее! 🤓

Изображение на обложке с номера , здесь .

Простой способ создания анимации наведения для кнопок с помощью CSS | автор: Erica N

Давайте начнем с создания разметки для двух кнопок.

Класс .container используется только для центрирования наши две кнопки для презентационных целей. Главное — это теги кнопок внутри контейнера div.

Каждая кнопка имеет два класса. Класс .btn предоставит общий стиль для обеих кнопок, но классы .btn-1 и .btn-2 мы будем использовать для предоставления индивидуальных эффектов наведения.

Затем мы переходим к CSS, где мы можем стилизовать кнопки.

Затем мы создаем стиль для обеих кнопок.

 button.btn {
 фон: прозрачный; 
 цвет: белый; 
 граница: 2 пикселя сплошного белого цвета; 
 размер шрифта: 20 пикселей; 
 межбуквенный интервал: 2 пикселя; 
 отступ: 25 пикселей 80 пикселей; 
 преобразование текста: прописные буквы; 
 курсор: указатель; Дисплей 
: строчно-блочный; 
 margin: 15px 30px; / * анимация и время переходов * / -webkit-transition: all 0.4с; 
 -моз-переход: все 0,4 с; Переход 
: все 0,4 с; 
}

Теперь у нас есть обе кнопки, и мы можем сосредоточиться на анимации для каждой кнопки. Начнем с первой кнопки.

Наша первая кнопка проста. Все, что нам нужно, — это эффект плавного появления наведения, который изменит фон на белый, а текст — на черный.

 button.btn-1: hover {
 цвет фона: белый; 
 цвет: черный; 
 -webkit-transition: все 0,4 с; 
 -moz-transition: все 0.4с; Переход 
: все 0,4 с; 
}

Следующая кнопка, которую мы создадим, будет более сложной, но мы рассмотрим каждый блок кода CSS.

Если вы посмотрите на наш код выше, у второй кнопки есть скользящий фон. Чтобы убедиться, что скользящая анимация остается в пределах кнопки, мы создаем следующий блок CSS для нашего класса .btn-2 :

 button.btn-2 {
 overflow: hidden; 
 позиция: относительная; 
}

Конечно, когда мы наводим курсор на эту кнопку, мы хотим, чтобы текст был черным:

 button.btn-2: hover {
 цвет: черный; 
}

Для создания белого анимационного фона мы используем псевдоэлемент : после вместе со свойством content , чтобы вставить рамку внутри кнопки.

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

 button.btn-2: после {
 content: ''; 
 позиция: абсолютная; 
 z-индекс: -1; 
 -webkit-transition: все 0.4с; 
 -моз-переход: все 0,4 с; Переход 
: все 0,4 с; 
 ширина: 100%; 
 высота: 0; 
 верх: 0; 
 осталось: 0; 
 фон: #fff; 
} button.btn-2: hover: after, 
 button.btn-2: active: after {
 height: 100%; 
}

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

Спасибо за внимание.

Эффекты наведения с CSS Hero

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

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

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

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

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

Hover Me

Интерактивная электронная почта для начинающих: 6 интерактивных элементов, которые вы можете добавить в свои электронные письма сегодня

В начале 2017 года мы опросили более 1200 маркетологов электронной почты о том, что, по их мнению, будет самой большой электронной тенденцией года.Интерактивная электронная почта возглавляет список: 27% маркетологов заявили, что 2017 год станет годом интерактивной электронной почты. И действительно, мы действительно видели несколько действительно вдохновляющих интерактивных писем, включая эти шедевры от Nest, B&Q и Burberry. (В ноябре мы также разослали интерактивный информационный бюллетень! Ознакомьтесь с ним здесь.)

Однако интерактивность в электронной почте далека от того, чтобы стать мейнстримом. Согласно нашему исследованию State of Email Creative, 85% всех респондентов электронной почты еще не экспериментировали с интерактивной электронной почтой.Пока что интерактивность, кажется, является игровым полем для известных брендов с командами электронной почты, которые действительно овладели искусством продвинутой электронной почты. Для небольших команд электронной почты или новичков в электронной почте интерактивность все еще кажется недосягаемой.

Начало работы с интерактивной электронной почтой

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

На Litmus Live Boston 2017 Элис Ли, электронная почта и веб-разработчик Shutterstock, поделилась своими хитростями для начала работы с интерактивным дизайном электронной почты, что сделало ее доклад одной из самых популярных сессий конференции 2017 года.

Все мы привыкли к интерактивности и кинетической обратной связи при навигации в Интернете и мобильных приложениях. Почему это должно заканчиваться электронной почтой? Чем больше мы добавляем интерактивности к нашим электронным письмам, тем больше это становится ожидаемым, а не новинкой, ESP будут вынуждены расширять свою поддержку более продвинутого кода, и мы будем все ближе к обеспечению более плавного взаимодействия между Интернетом и электронной почтой.
Алиса Ли, Shutterstock

Не было возможности лично присутствовать на Litmus Live? Сегодня мы представляем вам основные моменты сеанса Алисы с простыми интерактивными элементами, которые вы можете скопировать и настроить для своих кампаний.

Посмотреть запись полностью

С планом Litmus Plus или выше у вас есть доступ к полной записи выступления Алисы Litmus Live Talk.

Посмотреть видео →

Нет подписки на Litmus Plus? Записаться на пробную версию →

Эффекты наведения: первый шаг к интерактивному письму

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

Эффекты наведения: текст

Поддерживается в:

AOL
Apple Mail
Yahoo! Почта
Gmail

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

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

Встроенный CSS

  .txt-color: hover {color: # 8ddaeb! Important; }

HTML — изменение цвета текста при наведении курсора

  


Изменить цвет при наведении

В заголовке определите класс CSS, который определяет цвет при наведении курсора.Затем в теле письма добавьте тег , ссылающийся на этот класс, в тег ссылки. (Добавление класса hover в тег может вызвать мерцание в некоторых клиентах, например Yahoo! Mail. Использование тега помогает избежать этой проблемы.)

Эффекты наведения: затухание

Поддерживается в:

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

Встроенный CSS

  .fade-slow {переход: 0,3 с! Важно; }
.fade-slow: hover {переход: 0,3 с! важно; непрозрачность: 0,5! important;}

HTML — Непрозрачность при наведении текста 50% / 0,3 секунды

  

Затенение текста

В этом примере мы используем эффект наведения, чтобы изменить непрозрачность текстовой ссылки до 50%, но вместо немедленного применения изменения, эффект перехода установлен на 0.3 секунды помогают сгладить изменение непрозрачности. При использовании эффекта перехода не забудьте не только установить его для класса, который определяет состояние наведения, но также применить переход к исходному состоянию . При этом текст плавно исчезает при наведении курсора, а также плавно становится сплошным при удалении мыши от элемента.

Эффекты наведения: цвета фона

Поддерживается в:

AOL
Apple Mail
Yahoo! Почта
Gmail

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

Встроенный CSS

  .bg-rollover: hover {
цвет фона: # 585f6a! important;
}

HTML

  


 Горизонтальный расширяемый блок

Используйте приведенный выше встроенный CSS, чтобы добавить простое изменение цвета при наведении курсора на ваши кнопки CTA — как в этом случае, чтобы изменить цвет с красного на серый при наведении курсора.Просто добавьте класс «.bg-rollover» к HTML-элементу, в котором находится ваша пуленепробиваемая кнопка, в котором определяется цвет фона.

Эффекты наведения: фоновые изображения

Поддерживается в:

AOL
Apple Mail
Yahoo! Почта
Gmail

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

Встроенный CSS

  .bgimg-swap: hover {background-image: url ('http: // www.fillmurray.com/284/197 ')! important;}

HTML — замена фонового изображения

В CSS вы просто меняете URL фонового изображения при наведении курсора. Вы можете комбинировать его с переходом, чтобы добиться эффекта затухания (как мы видели это в примерах выше). Кроме того, поскольку это фоновое изображение, а не обычное изображение, вы можете накладывать элементы поверх изображения, включая ссылки, текст или элементы плавающего изображения.

Изучите интерактивность электронной почты

В этом 4-страничном техническом документе руководители электронной почты узнают об интерактивности электронной почты, видят примеры и понимают ее проблемы.

Получить резюме →

Если вы включаете несколько фоновых изображений с эффектами наведения курсора — например, если вы хотите добавить интерактивную плитку для каждого сообщения блога, которое вы публикуете в своем информационном бюллетене, — этот подход может стать немного громоздким.Это связано с тем, что для каждого фонового изображения необходимо указать собственное изображение при наведении курсора в CSS. Поэтому, если вы хотите включить несколько эффектов наведения для нескольких изображений, вам придется продублировать этот класс и не забыть указать путь к изображению наведения для каждого из них.

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

Эффекты наведения: обычные изображения

Поддерживается в:

AOL
Apple Mail
Yahoo! Почта
Gmail

Конечно, вы также можете добавить эффекты наведения к обычным изображениям:

Встроенный CSS

 .img-swap: hover img {max-height: 0px! important; height: 0px! important;}

HTML — Обмен изображениями

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

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

Эффекты наведения: движение

Поддерживается в:

AOL
Apple Mail
Yahoo! Почта
Gmail

Вы также можете добавить к своему электронному письму эффект движения, например, чтобы выделить CTA.Вот пример:

Встроенный CSS

  .grow {transition: 0.3s! Important;}
.grow: hover {цвет фона: # 298aae! важно;
высота: 50 пикселей! важно; позиция: относительная! важная;
переход: 0,3 с! important;}

HTML — всплывающая вкладка и изменение цвета

  <граница таблицы = "0" cellpadding = "0"
cellspacing = "0" align = "center">  
 

Всплывающая вкладка

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

Собираем все вместе

Вот документ Builder, в котором собраны все интерактивные элементы Алисы. Убедитесь, что вы проверили его, чтобы увидеть код в действии:

Хотите посмотреть, как эти эффекты могут работать в реальном письме? Алиса расскажет, как она использовала интерактивные элементы выше, чтобы сделать это электронное письмо Shutterstock по-настоящему особенным: