防止 :hover on touch 在 iOS答案

【问题标题】：Prevent :hover on touch in iOS防止 :hover on touch 在 iOS
【发布时间】：2016-01-18 04:56:32
【问题描述】：

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

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

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

// 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;
});

【问题讨论】：

标签： javascript jquery html ios css

【解决方案1】：

默认情况下，在 Safari 中第一次“点击”时会激活悬停。尝试离开默认悬停功能并点击它，悬停行为应该会发生。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：