2

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

我已经在互联网上搜索了解决方案，但找不到任何有用的东西。

当我在 iPad 上单击页面上的其他位置时，有没有办法让悬停消失？

4

3 回答 3

4

避免依赖 :hover

依赖:hover限制了移动设备上的选项。JavaScript 或 jQuery 无法关闭:hover元素的状态。

作为替代方案，您可以.hover使用鼠标事件和触摸事件的组合来添加和删除一个类。如有必要，如果您检测到对触摸事件的支持，请不要添加鼠标事件。

这是一个带有两个悬停菜单的JSFiddle 演示。要在移动设备上运行它，请使用这个独立版本的演示。第一个菜单使用: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 上进行测试。

移动优先

最简洁和最简单的方法可能是在支持移动设备时避免依赖悬停状态，而是依赖点击/触摸来使菜单出现和消失。换句话说，首先为移动构建，然后弄清楚如何让它在桌面浏览器上工作（而不是相反）。

于 2013-04-04T17:05:47.363 回答
1

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

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

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

悬停效果在您触摸元素时会起作用，但在您按住它时不起作用。而且我没有在安卓设备上测试它。但它适用于 ipad（移动 chrome 和 safari）。

PS 另外，我建议您在下面为所有元素添加 css 样式，用户可以触摸或按住：

-webkit-user-select: none;

此选项关闭带有元素的剪切/复制/粘贴对话框。并且不要将它用于所有文档。

于 2013-10-24T07:20:29.363 回答
0

这是我在下面的工作。我正在添加类 'clicked'，它具有按钮原始类的样式，但也附加了 !important ......（见下文）。

$('#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; }
于 2014-01-28T13:22:37.347 回答