hover行为在桌面与iPad上
我已经build立了一个使用纯CSS和:hover伪类来显示菜单的菜单。 我在iPad上testing了这个行为，发现hover并没有消失 – 甚至没有点击其他地方。
我已经在网上search解决scheme，但找不到任何有用的东西。
当我点击iPad上的其他位置时，有没有办法让hover消失？
我知道另一种方式来做到这一点（但我不认为它好多了）。
要启用CSS .hover效果，您应该将空onclick添加到元素：
<div class="hoverable" onclick="">...</div>
当您触摸元素时，hover效果将起作用，但当您触摸并按住时，hover效果不起作用。 而我没有在Android设备上testing它。 但它的工作在iPad（手机铬和Safari浏览器）。
PS另外我build议你为所有元素添加下面的CSS样式，用户可以触摸或触摸并保持：
-webkit-user-select: none;
该选项closures剪切/复制/粘贴对话框元素。 而不要使用它的所有文件。
避免依靠：hover
依靠:hover限制移动设备上的选项。 JavaScript或jQuery没有办法closures元素的:hover状态。
作为替代，您可以使用鼠标事件和触摸事件的组合来添加和删除.hover类。 如果需要，如果检测到对触摸事件的支持，请不要添加鼠标事件。
这里有一个JSFiddle演示与两个hover菜单。 要在移动设备上运行它，请使用此独立版本的演示 。 第一个菜单使用:hover伪元素，第二个使用.hover类。
在桌面浏览器上，两个菜单performance相同。 但对于触摸设备，@ ErwaySoftware的build议已应用于第二个菜单：如果您再次在触摸设备上触摸菜单项，则下拉菜单消失。 当然，这只适用于菜单项本身不是function性的超链接（如果它唯一的目的是打开下拉菜单）。
jQuery的
// Mouse events $('.menu > li').on('mouseover', function(){ $(this).addClass('hover'); }); $('.menu > li').on('mouseout', function(){ $(this).removeClass('hover'); }); // Touch events $('.menu > li > a').on('touchend', function(){ $(this).parent().toggleClass('hover'); });
在进行任何解决scheme之前，一定要在Android上进行testing。
移动第一
最简洁和最简单的方法可能是避免在支持移动设备时依靠hover状态，而是依靠点击/触摸来使菜单显示和消失。 换句话说，首先构build移动设备，然后弄清楚如何在桌面浏览器上工作（而不是其他方式）。
下面是我的工作。 我添加类“button”，它具有button的原始类的样式，但也有！重要的附加…（见下文）。
$('#your_button').click(function() { // Removing the old class if there was one $(this).removeClass('clicked'); // Adding clicked class $(this).addClass('clicked'); // DO THE REST OF YOUR BUTTON CODE HERE return false; }); #your_button{ background: #ff0000; color:#fff } #your_button:hover{ background: #88888; color:#fff } #your_button.clicked{ background: #ff0000 !important; color:#fff !important; }