避免依赖：悬停

依赖: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上进行测试。

首先移动

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

Answer 2

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

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

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

当您触摸元素时，悬停效果将起作用，但是当您触摸它时它不起作用。我没有在Android设备上测试它。但它适用于ipad（移动镀铬和野生动物园）。

P.S。另外我建议你为所有元素添加下面的css样式，用户可以触摸或触摸并保持：

-webkit-user-select: none;

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

Answer 3

以下是我的工作。我正在添加“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; }

桌面与iPad上的悬停行为

3 个答案:

避免依赖：悬停

首先移动