我构建了一个使用纯 CSS 和 :hover
伪类来显示菜单的菜单。
我在 iPad 上测试了该行为,发现悬停不会消失 - 即使单击其他位置也不会消失。
我已经在互联网上搜索了解决方案,但找不到任何有用的东西。
当我在 iPad 上点击页面上的其他位置时,有没有办法让悬停消失?
最佳答案
避免依赖 :hover
依赖 :hover
限制了移动设备上的选项。 JavaScript 或 jQuery 中无法关闭元素的 :hover
状态。
作为替代方案,您可以使用鼠标事件和触摸事件的组合来添加和删除 .hover
类。如有必要,如果您检测到对触摸事件的支持,请不要添加鼠标事件。
这是一个JSFiddle Demo有两个悬停菜单。要在移动设备上运行它,请使用此 standalone version of the demo 。第一个菜单使用 :hover
伪元素,第二个菜单使用 .hover
类。
在桌面浏览器上,两个菜单的行为相同。但对于触摸设备,@ErwaySoftware 的建议适用于第二个菜单:如果您在触摸设备上第二次触摸菜单项,下拉菜单就会消失。当然,只有当菜单项本身不是功能性超链接(如果它的唯一目的是打开下拉菜单)时,这才适用。
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');
});
在继续使用任何解决方案之前,请务必在 Android 上进行测试。
移动优先
最干净、最简单的方法可能是在支持移动设备时避免依赖悬停状态,而是依赖单击/触摸来使菜单出现和消失。换句话说,首先针对移动设备进行构建,然后弄清楚如何使其在桌面浏览器上运行(而不是相反)。
关于ios - 桌面电脑和 iPad 上的悬停行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15815513/