Hover в html – Как еще оживить HTML-страничку, или «Достойная замена использованию псевдоклассов :hover, :active» (шпаргалка для начинающих) — Вебджем.рф

Содержание

Псевдокласс :hover | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:hover { … }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

<!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>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

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

Синтаксис ?

Селектор:hover { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!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="page/1.html">Ссылка 1</a></p>
  <p><a href="page/2.html">Ссылка 2</a></p>
  <p><a href="page/3.html">Ссылка 3</a></p> 
 </body>
</html>

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

<!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="#">Русская кухня</a>
    <ul> 
     <li><a href="#">Бефстроганов</a></li> 
     <li><a href="#">Гусь с яблоками</a></li> 
     <li><a href="#">Крупеник новгородский</a></li> 
     <li><a href="#">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="#">Украинская кухня</a> 
    <ul> 
     <li><a href="#">Вареники</a></li> 
     <li><a href="#">Жаркое по-харьковски</a></li> 
     <li><a href="#">Капустняк черниговский</a></li> 
     <li><a href="#">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="#">Кавказская кухня</a> 
    <ul> 
     <li><a href="#">Суп-харчо</a></li> 
     <li><a href="#">Лилибдж</a></li> 
     <li><a href="#">Чихиртма</a></li> 
     <li><a href="#">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="#">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

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

Примечание

В браузере Internet Explorer до версии 7 псевдокласс :hover работает только для ссылок.

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

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

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

Если вы используете псевдоклассы :link и :visited, то псевдокласс :hover должен быть расположен после них.
Поддержка браузерами
CSS cинтаксис:
:hover { блок объявлений; }
Версия CSS
CSS1
Пример использования
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Псевдокласс :hover</title> <style> table { width: 50%; /* указываем ширину элемента в процентах от ширины области просмотра */ } th, td { text-align: left; /* горизонтальное выравнивание текста по левому краю */ border: 1px solid orange; /* сплошная граница размером 1 пиксель оранжевого цвета */ } tr:hover { background-color: khaki; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <tr> <th>Наименование</th><th>Модель</th><th>Цена</th> </tr> <tr> <td>Кирпич</td><td>100</td><td>$15</td> </tr> <tr> <td>Лабутены</td><td>krasnie</td><td>$1500</td> </tr> <tr> <td>Штаны</td><td>voshititelnie</td><td>$200</td> </tr> <tr> <td>Шапка</td><td>ushanka</td><td>$200</td> </tr> </body> </html>

В этом примере с использованием псевдокласса :hover мы подсвечиваем строку на которую в настоящее время наведен курсор:
Пример использования псевдокласса :hover.CSS селекторы
Hover html css эффект при наведении примеры
«Hover» — это один из способов оживить ссылку, но и не только ссылку! Можно «hover» применить для картинки, блока и в общем для всего, что имеет физическую оболочку – имеется ввиду тег.
Если у вас есть код какого-то объекта, то его на 99% можно обернуть в свойство :hover. Конечно же мы не будем рассматривать все возможные варианты использования a:hover.

Hover html css эффект при наведении

Что такое hover?

Я всегда называл «hover» — свойством, и посудите сами, что способность изменяться объектам – самое правильное название свойство, но на самом деле «hover» — это псевдокласс.
С самого начала нужно дать определение. Что такое hover !? Hover — как я и написало ранее – способность изменять свои свойства при наведении мышки.

Как обозначается свойство меняющее цвет ссылки при наведении!?

Свойство, которое свойством не является — называется псевдокласс, которое меняет цвет при наведении мышки на ссылку, обозначается в стилях таким образом:
Где буква а, перед которой нет никаких знаков, ссы воспринимает как тег ссылки. После буквы а идет : — двоеточие, которое и обозначает, что дальше идет псевдокласс, после него идет название псевдокласса a:hover, далее открываются фигурные скобки и внутри прописываются свойства для этого тега ссылки

Как прописать hover в файле css, на странице, в теге

Нам нужно разобраться, как задавать свойство, которое меняет цвет при наведении! Поскольку ссылка у нас по умолчанию забита стиями, то возиться ней муторно, поэтому возьмем для римера любой тег! Вообще любой, например span! И будем с ним работать!
Прежде нужно сказать пару вводных…
Как вы знаете, что свойства css можно прописывать тремя способами! 1). В файле css, 2). на странице в стилях, 3).в самом теге .
Начнем с файла css.

Изменение цвета с помощью «hover»

1). Для данного примера нам потребуется наш объявлений тег ранее без стилей! Сейчас на этом теге ничего не сработает!
<span>Тег span без ничего</span>
Результат:
Тег span без ничего
Добавляем к нашему тегу класс ->
<span>Тег span с классом и example:hover</span>

Теперь в файле css напишем стили для этого класса, пусть hover меняет цвет при наведении на красный:
.example:hover
{
color:red;
}

Результат:
Что проверить работу стилей при наведении мышки наведите по тексту
Тег span с классом и example:hover

Появление руки при наведении пример

2). Второй вариант, это прописать стили на самой странице, обычно их прописывают между тегами <head></head>, откройте код страницы ctrl + U и далее нажмите ctrl + F и введите скопированное отсюда слово head… и вы увидите расположение данного тега.
Но сейчас можно прописывать стили вообще в любом месте страницы!
Там они прописываются в соответствующем теге
<style></style>

Возьмем сверху экспериментальный тег, и к нему добавим еще один класс example_2:
<span>Тот же тег span, но и добавим еще один класс example_2</span>

Менять цвет второй раз скучно, давайте теперь к нашему тегу прибавим например руку, при наведении будет показываться рука.
За это у нас отвечает свойство -> cursor: pointer;. Берем теги стилей и помещаем куда-нибудь на страницу:
<style>
.example_2
{
cursor: pointer;
}
</style>

Результат:
Здесь приведен пример появления руки при наведении, но и осталось изменение цвета при наведении!
Тот же тег span, но и добавим еще один класс example_2

Hover внутри тега

3). Третий вариант использования hover — использование его в самом теге!
Здесь нужно сказать, что это невозможно , потому, что hover не свойство, а псевдо класс, и в теге размещение его невозможно!
НО!
Есть другая возможность поставить эффект при наведении прямо в тег — это добавление js во внутрь тега:
Создадим какой-то div со стилями! Наведите мышку на этот див…
<div> ЛЮБОЙ ТЕКСТ </div>

ЛЮБОЙ ТЕКСТ

Как видим — никакого эффекта при наведении нет!
Теперь добавим появление мышки над объектом и после этого будем отправлять в тег свойство стилей background:
onmouseover=»this.style.backgroundColor=’#FFF’;»

Но если мы убираем мышку, то свойства остаются!
ЛЮБОЙ ТЕКСТ

А нам надо чтобы свойства возвращались при покидании мышкой — в общем эмуляция псевдо класса Hover — нам надо добавить еще одно поведении мышки — покидание мышки с объекта:
onmouseout=»this.style.backgroundColor=’#333′;

Теперь соединим весь код вместе:
<div > ЛЮБОЙ ТЕКСТ </div>

Вот мы заставили hover работать и в теге!
ЛЮБОЙ ТЕКСТ

Использовать opacity в hover в css
Решил добавить пример использования hover в связке с opacity , все довольно просто! Мы можем просто понизить opacity в hover до 0.5
.example_opacity:hover
{
opacity: 0.5;
}

<span>Делаем opacity 0.5 в hover</span>

Эффект будет понижение контрастности.. или просто будет становиться прозрачным…
Результат установки opacity в hover

Делаем opacity 0.5 в hover

Если сделать наоборот!?
Предположим, что нам требуется убрать opacity в hover. Изначально устанавливаем opacity 0.5, а в hover opacity =1
.example_opacity2
{
opacity: 0.5;
}
.example_opacity2:hover
{
opacity: 1;
}
<span>Убираем эффект opacity в hover</span>

Результат:
Убираем эффект opacity в hover

решение проблем с эффектом наведения на сенсорных устройствах
От автора: с псевдоклассом :hover CSS возникали проблемы с тех пор, как на устройстве с сенсорным экраном был установлен первый веб-браузер. Конечно, появлялись определенные решения, но ни одно из них не было достаточным. С новыми Level 4 Media Queries эта проблема, кажется, решена навсегда.
«Хм… а в чем проблема?»
Допустим, вы просто добавили к элементу веб-страницы стиль :hover, поэтому он получает некоторый стиль, когда на него наводится курсор мыши. Просто.
Наведение на настольном компьютере. Источник: https://proper-hovering.glitch.me
Проблема возникает, когда пользователь взаимодействует с этим элементом на сенсорном экране: после того, как выполнено нажатие, эффект наведения для элемента закрепляется. Это также происходит, когда элемент даже не активируется касанием, например, если к нему прикоснулись во время прокрутки.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Если перетаскивание начинается на элементе, применяется эффект наведения, потому что технически объект указателя (это ваш палец, как правило) находится над элементом. Это проблема само по себе: на сенсорном устройстве это является нежелательным взаимодействием с пользователем.
Тем не менее, ситуация становится еще хуже: после прекращения перетаскивания эффект наведения остается активным!
Наведение на сенсорном экране (эмуляция). Источник: https://proper-hovering.glitch.me
Это определенно запутает некоторых из ваших пользователей, и это никогда не будет хорошо. Что-то должно быть сделано.
«Уже должно было появиться какое-то решение…»
Ну, есть некоторые, большинство из которых описаны в этой прекрасной статье. Лучшее из них включает в себя использование JavaScript для определения наличия сенсорных функций экрана, применение на основании этого класса для body, а затем явное указание на этот класс каждый раз, когда к любому элементу применяется эффект :hover.
body.nontouch nav a:hover { background: yellow; }

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

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

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Можно подумать, что у сообщества JS есть готовый пакет, предназначенный именно для этой проблемы, но это не так.
При использовании с инкапсулированными стилями, основанными на компонентах JS-фреймворка, это решение вносит просто огромный разлад. Каждый раз, когда используются эффекты наведения, стили этого компонента должны ссылаться на этот глобальный класс. Неудобно.
Не будет двух одинаковых проектов, использующих это решение. Может быть, один работает хорошо на определенном устройстве, а на другом — нет. Должен быть стандартизированный способ решить эту проблему.
Введение Level 4 Media Queries
Медиа-запросы великолепны. Они в одиночку создали адаптивный веб-дизайн и являются краеугольным камнем в современной мобильной веб-разработке. В качестве отличной инициативы W3C добавил Функции взаимодействия с медиа в качестве рекомендации для L4 Media Queries, и мы можем их использовать для распознавания устройств с сенсорным экраном.
Включены четыре медиа-запроса: hover, any-hover, pointer и any-pointer. Они предоставляют информацию о возможности наведения и типе пользовательских вводов. Информация может быть только о первичном вводе или о любом доступном вводе. Например, @media(hover: hover) будет true, если основной ввод может быть наведением (например, курсор мыши), а @media(any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, сенсорный ввод). Эти медиа-функции предоставляют достаточно информации для правильной обработки :hover.
Одна из проблем заключается в том, что эти запросы на данный момент являются просто рекомендованными кандидатами, что означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними и решите, подходит ли это для вашего проекта. Это определенно на данный момент подходит для нас, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), заставляет нас еще более оптимистично смотреть в будущее.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании. С точки зрения UX, мы ищем решение, которое было бы наименее запутанным и наиболее подходящим для пользователя.
Это означает отсутствие эффектов наведения на чисто сенсорных устройствах, и использование их на всех остальных устройствах. Особый случай — это ноутбуки с сенсорными экранами, но мы можем ожидать, что мышь / тачпад используется большую часть времени. Даже если эффект наведения застревает, пользователь может легко использовать мышь / тачпад, чтобы проверить проблему и устранить ее. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения, что позволяет правильно обрабатывать медиа-запросом.
Вот тестовый сайт, с помощью которого вы можете протестировать свое собственное устройство, чтобы определить, какие из этих медиа-запросов применяются к нему, а также увидеть некоторые из наиболее популярных настроек устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, работают нормально. Проверяя разные устройства, он показывает, что ноутбуки можно выбрать с помощью запроса @media(hover: hover) и (pointer: fine) {}.
@media(hover: hover) and (pointer: fine) { nav a:hover { background: yellow; } }

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Я что-то пропустил? Что вы обычно используете в этих случаях? Я очень доволен этим решением, но дайте мне знать, если есть что-то лучше!
Автор: Mezo Istvan
Источник: https://blog.usejournal.com
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Использование :hover | WebReference
На примере ссылок использование :hover выглядит следующим образом.
a { color: green; } a:hover { color: red; }
Сперва мы определяем исходный стиль элемента, в частности, задаём цвет ссылок с помощью селектора A зелёным. Затем ниже пишем тот же селектор и через двоеточие без пробелов добавляем к нему :hover. После этого идут стилевые правила, которые должны проявляться при наведении курсора на элемент. В данном случае мы меняем цвет ссылки на красный.
:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в <header> добавлены без традиционного подчёркивания через свойство text-decoration со значением none. При наведении на эти ссылки добавляется подчёркивание с помощью значения underline. В <footer> ссылки при наведении просто меняют свой цвет.
Пример 1. Использование :hover для ссылок
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Сальса</title> <style> header { background: #e2edc1; } footer { background: #f4783b; } ul { margin: 0; padding: 10px; } li { display: inline; margin-right: 10px; } header a { color: #333391; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } header a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении */ } footer a { color: #fff; } footer a:hover { color: #333; } </style> </head> <body> <header> <ul> <li><a href="#">Uno</a></li> <li><a href="#">Dos</a></li> <li><a href="#">Tres</a></li> </ul> </header> <main> <p>Сальса — современный социальный танец. Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.</p> </main> <footer> <ul> <li><a href="#">Cinco</a></li> <li><a href="#">Seis</a></li> <li><a href="#">Siete</a></li> </ul> </footer> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Ссылки разных цветов
Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover.
a { color: green; } a:hover { color: red; } a:visited { color: purple; }
Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.
a { color: green; } a:visited { color: purple; } a:hover { color: red; }
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 22.05.2018
Редакторы: Влад Мержевич
Ищем поддержку hover на css / Habr
Доброго времени суток, дорогие хабрахабровцы!
При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности?

В начале сразу хочу сказать о том, что есть js-библиотека Modernizr, которая решает эту задачу. Но… Прикручивать эту библиотеку только для определения поддержки hover, вместо написания одного медиа-запроса в css — не лучший вариант, на мой взгляд.
Но и с медиа-запросами не все так просто. Давайте посмотрим, какие есть варианты!
1. media (hover)
div{color:red;} @media (hover){ /*Поддерживает hover*/ div{color:green;} }

Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой hover. Но давайте посмотрим на поддержку браузерами: caniuse.com/#feat=css-media-interaction
Как видим, он не поддерживается IE и Firefox. Т.е. наш код будет воспринимать эти браузеры, как без поддержки hover. Такой вариант нам не подходит!
2. media (pointer:coarse)
div{color:green;} @media (pointer:coarse){ /*touch-устройство*/ div{color:red;} }

Этот запрос работает в точности наоборот, т.е. только для touch-устройств. Поддержка такая же, как и у media (hover), но т.к. IE и Firefox являются браузерами для ПК — то в них и так не должен срабатывать данный медиа-запрос.
Такое решение вполне подходит для тех случаев, когда нужно прописать стили именно для touch-устройств. Но в основном, стоит задача — прописать стили именно для hover. А это означает, что придется сначала писать стили для всех браузеров, а потом сбрасывать их в медиа-запросе. Это не только увеличивает код, но и довольно неудобно, т.к. надо дублировать каждое свойство, измененное при событии hover на элементе.
3. media (hover) +
Выбирая из двух вышеупомянутых вариантов, первый наиболее привлекательный. Была бы еще браузерная поддержка побольше…
Но, к счастью, у нас есть целый ряд медиа-запросов, которые поддерживаются только в определенных браузерах. Специфичность такой поддержки можно посмотреть на этом сайте.
Итак, данный код будет работать только в IE:
@media (min-width:0\0) {}

А этот медиа-запрос сработает только для Firefox:
@media (min--moz-device-pixel-ratio:0) {}

Так давайте же объединим все 3 запроса!
div{color:red;} @media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0){ /*Поддерживает hover*/ div{color:green;} }

В результате получаем универсальный медиа-запрос, срабатывающий при поддержке hover.
Запрос поддерживается во всех основных браузерах, и как бонус, корректно работает на Blackberry и в Opera Mini (чего не было во 2 варианте).
Демо сравнения 3х подходов. Зеленый цвет = поддержка hover:

Hover в html – Как еще оживить HTML-страничку, или «Достойная замена использованию псевдоклассов :hover, :active» (шпаргалка для начинающих)

Псевдокласс :hover | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

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

Синтаксис ?

Обозначения

Пример

Примечание

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

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

Браузеры

Автор и редакторы

Псевдокласс :hover | CSS справочник

Значение и применение

Поддержка браузерами

CSS cинтаксис:

Версия CSS

Пример использования

Hover html css эффект при наведении примеры

Hover html css эффект при наведении

Что такое hover?

Как обозначается свойство меняющее цвет ссылки при наведении!?

Как прописать hover в файле css, на странице, в теге

Изменение цвета с помощью «hover»

Появление руки при наведении пример

Hover внутри тега

Использовать opacity в hover в css

Результат установки opacity в hover

Если сделать наоборот!?

решение проблем с эффектом наведения на сенсорных устройствах

«Хм… а в чем проблема?»

«Уже должно было появиться какое-то решение…»

Введение Level 4 Media Queries

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

PSD to HTML

Использование :hover | WebReference

Автор и редакторы

Ищем поддержку hover на css / Habr

Добавить комментарий Отменить ответ

Рубрики