桌面上的鼠标悬停行为vs iPad [英] Hover Behavior on Desktop vs iPad

问题描述

我已经建立了一个菜单，使用纯CSS和：hover 伪类来显示菜单。
我在iPad上测试了behavour，看到悬停没有消失 - 甚至没有点击其他地方。

I've built a menu that uses plain CSS and the :hover pseudo-class to display the menu. I tested the behavour on an iPad and see that the hover doesn't disappear - not even by clicking somewhere else.

我已经在互联网上搜索解决方案

I already searched the Internet for solutions, but couldn't find anything useful.

当我点击iPad网页上的其他位置时，有没有办法让鼠标悬停消失？

Is there a way to let the hover disappear when I click somewhere else on the page on iPad?

推荐答案

我知道另一种方法（但我认为不会更好）。

I know another way to do it (but I didn't think it's much better).

要启用css .hover效果，您应该向元素添加空onclick：

To enabled css .hover effect you should add empty onclick to the element:

<div class="hoverable" onclick="">...</div>

悬停效果会在您触摸元素时起作用，但在您触摸并按住它。我没有测试它在Android设备上。但它的工作在ipad（手机chrome和safari）。

Hover effect will work when you touch element, but didn't work when you touch-and-hold it. And I didn't test it on android devices. But it's work on ipad (mobile chrome and safari).

此外，我推荐你为所有元素添加CSS样式，用户可以触摸或触摸并保持：

P.S. Also I recomend you add css style below for all elements, wich user may touch or touch-and-hold:

-webkit-user-select: none;

此选项关闭使用元素剪切/复制/粘贴对话框。不要将其用于所有文档。

This option turns off Cut/Copy/Paste dialog with element. And do not use it for all document.

这篇关于桌面上的鼠标悬停行为vs iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！