我构建了一个菜单，它使用纯 CSS 和 :hover 伪类来显示菜单.我在 iPad 上测试了这个行为，发现悬停并没有消失——即使点击其他地方也没有.

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>

悬停效果在您触摸元素时会起作用，但在您按住它时不起作用.而且我没有在安卓设备上测试它.但它适用于 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.