Не работает hover iphone

Как мы :hover на iOS побеждали…

Ни для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах…

Самый яркий для меня пример, это обработка псевдокласса :hover . Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1 «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером…

Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1 Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert(‘click’) . Это происходит потому, что iOS понимает что за :hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта.

Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один день отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с :hover разом — прошу под кат…

ВНЕЗАПНО, после очередного обновления сервиса, разработчиком «платформы» которого я являюсь, вскрылась неприятная проблема — на iPad нельзя выбрать ни одну строку практически во всех «таблицах», которые есть на сервисе. «Клик» просто не срабатывает! Надо заметить что «таблица» это не просто строчки и столбцы. В нашем случае это довольно «богатый» UI-элемент c отметками записей, сортировками, группировками, фильтрами, всякими «лесенками» выводом на печать и экспортом в PDF и Excel…

После долгой и нудной локализации проблемы мы выделили изолированный, простой кусок HTML+CSS который давал схожий результат…

• HTML-таблица, несколько строк, несколько столбцов
• В одном из столбцов есть «чекбокс» — div который скрыт по-умолчанию и показывается при наведении на строку. Реализован через :hover
• На строку навешен click
• Таблица имеет размер больше, чем ее контейнер
• Контейнер имеет фиксированный размер и у него включен overflow: scroll

Вот пример: jsfiddle.net/822eG/4. Попробуйте понажимать по строкам таблицы. Hover будет срабатывать (вы увидите «чекбокс») а вот click (и alert ) вы не увидите как не старайтесь наживать на строчки.

На эту тему я даже завел пост на SO stackoverflow.com/questions/21786375/ios-7-hover-click-issue-no-click-triggered-in-some-cases который не принес особого профита, кроме предложения включить (непонятно почему) -webkit-overflow-scrolling: touch на контейнере таблички который реально помогал на примере из jsFiddle, но не помогал на реальном приложении.

В процессе обдумывания этого бардака пришло следующее решение (мой собственный ответ на вопрос на SO) — а что, если :hover заменить на CSS-класс, который «накидывать» кодом, отлавливая mouseenter / mouseleave ? Этот простой фикс на самом деле все решает. Даже работать начинает «веселее» — не надо больше кликать два раза. От первого же нажатия получаем и alert и «чекбокс»: jsfiddle.net/822eG/10

За неимением лучшего варианта стали обдумывать этот… На самом деле у нас очень большой code base. Много как «платформенного» кода, так и «прикладного», на этой платформе основанного. И кто его знает, кто, где и когда, при каких условиях захочет использовать :hover и захочет ли он при это он что-то скрыть или показать. В общем нужно чтобы было «все само (с)» а среднестатистический разработчик не думал о проблемах на iOS.

В итоге получилось следующее решение:

• С помощью MutationObserver (который есть в iOS 6-7) мониторим вставку тэгов link в head документа — мы это можем себе позволить, т.к. все стили у нас заведомо подключаются с помощью require.js и в Safari это гарантированно будет новый link
• При добавлении новых link пробежимся по document.styleSheets и проанализируем их.
• Переберем все правила и найдем среди них те, в селекторе которых присутствует :hover
• Посмотрим на стили для таких селекторов, проверим нет ли там display отличного от none и visibility , отличного от visible
• Если таковые найдутся — перепишем селектор, заменим :hover на .hover (т.е. псевдокласс на обычный класс).
• А на body навесим через delegate обработку mouseenter / mouseleave для найденного селектора, точнее для той его части, которая расположена до :hover

К счастью сделать это оказалось совсем просто… Каждый styleSheet содержит коллекцию rules , в которой лежат собственно правила. Каждое правило обладает свойством selectorText которое можно менять на ходу. А также обладает коллекцией style где во-первых содержится набор свойств, заданных в данном стиле — они хранятся в виде «массива». У style есть .length , перебирая из по длине получим все свойства, измененные в данном стиле. Во-вторых в style содержатся значения измененных свойств. По индексу, равному имени свойства хранится значение свойства.

То есть если у нас, скажем, есть CSS-код:

то у данного правила selectorText == ‘.myClass:hover .block, .myItem:hover .element’ , style.length == 2 , style[0] == ‘color’ , style[1] == ‘display’ , style.color == ‘red’ а style.display == ‘block’ .

Все остальное — дело техники…

К сожалению выяснилось, что первичны обход правил работает (на наших объемах стилей и link-тэгов) не очень быстро… Профилирование показало, что обращение к rules занимает львиную долю времени. Возможно, WebKit инициализирует данное свойство лениво и первое обращение инициирует какой-то глубинный парсинг стилей в набор объектов.

Источник

Псевдокласс :hover не работает на IOS

Псевдокласс :hover
Надо изменить атрибуты одного div’a при наведение на другой. Написал так: .

Псевдокласс hover
Доброго времени суток! Есть два класса(main,subclass), мне нужно что бы при наведении на main.

Не срабатывает псевдокласс :hover !
Обьясните деревянному. Почему не срабатывает код? 9

Решение

Решение

maks_7, сложно сказать не имея перед глазами сути проблемы. Можно попробовать вот таким скриптом: (предварительно подставив Ваши селекторы)

в данном случаи применяется ко всем ссылкам, которые находятся в блоке .menu

Добавлено через 16 минут

если имеется jquery конечно.

Вложения

menu.rar (3.4 Кб, 9 просмотров)

maks_7, сразу после вставьте такое:

Блин, плохо нет устройства под рукой ios’овского.

такой вариант:
тамже, после head (вместо всего того, что выше)

и сверху, там где стили css:

HTML CSS псевдокласс hover
Ребят, недавно занялся версткой сайта, опыта до этого не было! столкнулся со следующей задачей: на.

Псевдокласс :hover для нескольких элементов
Есть такой элемент странички: При наведении на текст и текст и стрелочка должны менять цвет.

Псевдокласс :hover и jQuery
Добрый вечер. Странная вещь твориться, помогите разобраться. Итак, есть картинка с таким стилем.

Источник

Исправить CSS-зависание на iPhone/iPad/iPod

Я хочу исправить эффект наведения на iOS (переход на событие touch), но у меня нет идеи. Позвольте мне объяснить это. На вашей странице есть текст:

Хорошо, в dekstop, если вы наведите указатель мыши на текст, вы получите фон #ddd, верно? Но в iOS, если вы касаетесь текста, вы ничего не получаете, но если вы нажмете на него, он получит уродливый и липкий фон #ddd, что не очень приятно, и я хочу, чтобы пользователь получил эффект зависания, когда касался этого текста (что-то вроде touchhevent, я думаю), Но я вижу, что некоторые веб-сайты исправлены как freemyappps.com или (пожалуйста, проверьте этот сайт → D4F на своем устройстве ios и прикоснитесь к чему-нибудь, чтобы увидеть эффект зависания, как есть торт:)) Но как эти сайты исправили это? Как можно исправить их? Благодаря

ОТВЕТЫ

Ответ 1

Вот базовое, успешное использование javascript hover на ios, которое я создал. http://jsfiddle.net/pizzaboy13/u7FL5/

Весь код из jsfiddle находится ниже, поскольку вы не можете иметь ссылку на jsfiddle.net без кода.

Примечание. Я использовал jquery, который, надеюсь, хорошо для вас.

Ответ 2

Добавить onclick = «» на все, что вы хотите, чтобы iOS распознал элемент с зависанием.

Ответ 3

Некоторые люди об этом не знают. Вы можете применить его на div:hover и работать на iPhone.

Добавьте к элементу следующий css с эффектом :hover

Ответ 4

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

Ответ 5

Onclick = «» был очень темпераментным, когда я пытался его использовать.

Использование: active css для событий нажатия; просто поместите это в свой заголовок:

Ответ 6

Псевдокласс класса hover работает только на iOS при применении к тегу ссылки. Они делают это, потому что на прикосновении сенсорного устройства нет наведения. Он больше похож на активный класс. Таким образом, они не могут иметь один, если только его ссылка не идет по причинам удобства использования. Измените свой div на тег ссылки, и у вас не будет проблем.

Ответ 7

Назначение прослушивателя событий целевому элементу, похоже, работает. (Работает с ‘click’, по крайней мере.) CSS hover на ios работает только в том случае, если назначен прослушиватель событий

Также, похоже, работает обтекание целевого элемента в [href= тривиальный]. fooobar.com/questions/261964/.

Соответствующая записка/диаграмма для мобильного алгоритма Safari для обработки кликов и других событий приведена здесь: Можно ли игнорировать псевдоклас: hover для пользователей iPhone/iPad?

Ответ 8

В ответ на Dan (fooobar.com/questions/261963/. ) я бы рекомендовал слегка измененную версию.

Ответ 9

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

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

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

Ответ 10

Здесь очень небольшое улучшение ответа user1387483 с использованием непосредственной функции:

Кроме того, я согласен с Boz в том, что это, по-видимому, «самое аккуратное, наиболее совместимое решение».

Ответ 11

На некоторых сайтах мне нужно использовать css «cursor: help». Только iOS это вызывало у меня много раздражения. Чтобы решить эту проблему, измените все параметры страницы на «курсор: указатель». Это работает для меня.

Ответ 12

Где я решил эту проблему, добавив атрибут видимости в код CSS, он работает на моем веб-сайте

Источник

Fixing the iPhone CSS hover problem on iOS

Mobile phones don’t have a mouse, your greasy fat touchy fingers have to do the job, they kinda act like a giant mouse.

There is major difference: a mouse can click, drag and hover above the screen, while your fingers can click and swipe, but not hover. Well they can, but nothing is happening then. 🙂

The official terms here are: mouse-events, touch events, and pointer events, for both mouse and touch events. So touch events don’t know about hover, cause that is a mouse event.

So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover.

Hover events work on mobile Android or Firefox browsers, as those browser vendors looked for compatibility, and made a click with your fingers act like hover on elements that are not a link. That is smart thinking, and good care for compatibility. Keep old sites working. Keep sites accessible without forcing Javascript.

But they don’t work on iPhone or mobile Safari, so we need a solution for that.

Plain HTML is and has always been responsive. It’s the CSS that destroyed it, by setting explicit width. Well there was no max-width, so designers had not much choice. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible.

Pity the Apple people. An iPhone with mobile Safari doesn’t do :hover , breaking compatibility for old sites, and forcing webdevelopers to use `Javascript` for these trivial things. Annoying.

There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else.

We need better solutions!

How to make :hover work on Safari iOS on iPhones and iPads.

Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days. Tested on the latest iOS 13.

1. Add a onclick attribute to the body

This miraculously makes the CSS rule :hover work on other elements. Don’t ask me the logic. Simple and short. You could also use ontouchend , ontouchstart or ontouchmove .

2. Add a ontouchmove attribute to the html element

This also miraculously makes the CSS rule :hover work on other elements in the body. You could also use ontouchend , ontouchstart or ontouchmove .

3. Add a tabIndex attribute to the body

This also makes the CSS rule `hover` work, also simple, and it is the only one that works when users have disabled Javascript. (Which really improves privacy, security, speed, and battery life and saves tons of MB’s.)

This example has another Apple special: the webkit prefix for -webkit-backface-visibility . Why on earth is that still needed in 2019? Apple fix your stuff!

4. Add a small javascript in the document head:

Adding a Javascript listener to the document, also makes :hover work. Doesn’t matter which type, as long you’re using a click or any mouse-event: touchstart , touchend or touchmove

From all solutions is the most poetic. A piece of code that keeps the internet moving on the touchscreens of you’re iPhone or iPad.

This small piece of code is a giant leap for accessibility.

But solution 3 is the one to go for. In the end we shouldn’t force Javascript on users, do we? And it’s according to the specs.

Please let me know if this works for you. And please add a comment if it doesn’t work!

This entry was posted on Wednesday, November 6th, 2019 at 5:59 pm and is filed under browser, CSS3, HTML5, mobile, Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “Fixing the iPhone CSS hover problem on iOS”

Wow, this is a simple solution. It works on my iPhone, have you tested it on other phones?

@Matt, Nope. Just on the latest iPhone 11.

Hey. I was running into a problem with hover. I added the onclick and it works. You just answered my problem after 30 minutes of searching. Hats off to you. THANKS!

a) THANK YOU very much for documenting these solutions!

b) ONLY #4 allows me to TURN-OFF the hover by tapping on a non-hover portion of the screen. The other 3 all leave my page in a state with something hovered.

@Jim, which iOS version do you use? I don’t have that problem.

Unfortunately not all Apples taste the same. Apple has fragmentation, like Android. It behaves different on a modern iPhone with iOS 13 than on an older iPad Mini.

I tried it on an older iPad Mini, and it wasn’t working with JavaScript disabled, which is the main goal (HTML/CSS solution).

How if we dont want hover to work on iOS devices,Since its taking a double click on iOS devices to open a link or select a color etc. Can you please help me with that

I am iOS 13.5 (not 13.5.x) on both my iPhone (iPhone 11 Max Pro) and my iPad (Original 9.7″ iPad Pro)

tabindex has a strong use for accessibility, isn’t it going to mess up the tab navigation and screen reader use ?

is it working with tabindex=-1 ?

Worked on W10 with Firefox, worked with Chrome and Edge. Worked on Samsung Galaxy 10, even worked with Safari on desktops – but not on mobile Safari. But fixed it! Don’t know how it does it (!), but congratulations and many thanks.

I’m on iOS 14.5.1 and it still works. I think the explanation is quite simple: “ontouchmove” activates a touch latency to separate tapping events from moving/scrolling events. So a short touch is a tapping (=click) and a slighly longer touch is the start of a moving event, which includes a short hovering event, before the dragging begins. But since the absence of force touch a longer press brings up the contextual menus of iOS, which breaks your hack at a certain point.

Leave a Reply

Mission

This blog is maintained by the Dutch Amsterdam based firm Webonomic.

Most posts are written by Webonomics badly-shaven ill-dressed main developer on a Friday casual Friday afternoon and posted a few months later.

Источник