Почему hover не стабильно работает

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

Jun 6, 2019 · 4 min read

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

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

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

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

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

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

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

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

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

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

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

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 имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.

Источник

Great Wall Hover Клуб

Hover H5. При запуске двигатель не держит холостой ход.

• Тема закрыта

попробуй клемму с акума снять. покурить мин 15 и поставит..и завестись.
Есть чувство что шалит Регулятор холостого хода.

Поделюсь своим горем.

Уважаемый, мы даже не догадываемся какой у вас движок! , а вы диагноз просите!

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

Уважаемый, мы даже не догадываемся какой у вас движок! , а вы диагноз просите!

Наверное от усталости и нервов не подумал. Бензиновый 2.4

Прикол. Оказывается, у нас есть официальный диллер Grate Wall. Правда я их не нашел ни на одном поисковике диллеров.
http://www.smolensk-auto.ru/forum/index.ph. t=0&start=0
Завтра буду звонить.

По поводу автозапуска — стаж вождения у меня небольшой, для меня было критично, чтобы между мной и Смоленском было как можно меньше Москвы.
Купил в Евроком — Автотрейд. По поводу их техобслуживания отзывы не очень, но по поводу продажи и предпродажной подготовки вроде отзывы хорошие. Машину без допов они обещали через 3 месяца. Так что автозапуск входил в «добровольно-принудительный» пакет опций.

PS: Кстати, продажа действительно понравилась. Все показали, все рассказали. После мойки при предпродажной подготовке образовался небольшой налет на капоте, я его увидел, но сказать не успел: менеджер Алексей сам его заметил, сказал что в таком виде отдать машину не может и отправил машину на повторную мойку.

Сообщение отредактировал dajigin: 03 июня 2012 — 20:31

Источник

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

Jun 6, 2019 · 4 min read

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

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

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

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

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

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

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

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

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

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

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

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 имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.

Источник

Не работают :hover и :transition

Спросил lokonaft,
28 августа 2018

Вопрос

lokonaft

Люди добрые, помогите разобраться, весь день пытаюсь понять почему у меня не получается.
В общем идея была сделать одну красную кнопку, чтобы при наведении появлялось еще 4 зеленых.
Реализовать попытался 2мя очень похожими способами, через div и через список.

https://codepen.io/lokonaft/pen/GXqBBP — в данном случае почему то не работает transition
https://codepen.io/lokonaft/pen/qMNMVL — в данном случае я то ли не могу правильно задать hover, то ли я чего то не понимаю

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

.navigation <
background-color: rgba(31, 30, 30, 0.438);
width: 900px;
height: 30px;
>
.navigation li <
display: inline-block;
padding: 5px 15px;
&:hover <
content: «»;
background-color: rgb(36, 36, 36);
cursor: pointer;
>
>
a <
color: black;
text-decoration: none;
font-family: sans-serif;
&:hover <
content: «»;
color: white;
>
>

Не могу закруглить углы у background-color. В чем проблема?

Добрый вечер, ребята.

Вторые сутки блуждаю в сети и не могу найти ответ на свой вопрос.
.niz:hover <
background: red;
этим кодом я получил возможность менять цвет определенного блока наведением курсора, вопрос в следующем.
Как делать, что бы после каждого наведения цвет менялся на другой а не на один и тот же. То есть зеленый, красный, оранжевый и так далее, спасибо большое

Источник