防止：在iOS上悬停触摸

Question

我有一个菜单需要在它悬停时弹出（当光标移到外面时折叠）。但是，在触摸设备上，我希望它能够在“点击”中展开和折叠，因为悬停事件并非非常有用。

为此，我使用：hover选择器，以及应用于触摸事件的备份.clicked类。 touchstart处理程序切换.clicked类并使用preventDefault阻止默认操作（设置：hover标志）。

它在Chrome的移动模拟器中运行良好，但在我的iPhone上，菜单最终同时具有：hover和.clicked。为什么会这样？

这是一个小提琴：http://jsfiddle.net/rgLodhjg/1/

// html
<div class="test">
</div>

// css
.test {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}
.test:hover:before {
    content: "hover";
}
.test.clicked:after {
    content: "clicked";
}

// js
$(".test").on("touchstart", function(e) {
    $(this).toggleClass("clicked");
    e.preventDefault();
    return false;
});

Answer 1

你可以尝试这个，它可以在iOS9上运行（我不确定iOS8及更早版本）：

@media (hover: hover) {
  .test:hover:before {
    content: "hover";
  }
}

要支持较旧的iOS系统，您可以使用mq4-hover-shim。

您还可以在this post中使用@Simon_Weaver提供的解决方案。

Answer 2

默认情况下，在Safari中的第一个“点按”处激活悬停。尝试保留默认的悬停功能并点击它，应该发生悬停行为。