在 iOS Safari 中单击会触发您点击下方元素的“悬停状态”

Question

在 iOS Safari 11 上，如果我有一个 <div> 定位在一个元素上，该元素具有 :hover 效果，并且 <div> ，然后我的链接“underneath”在从 DOM 中删除元素后应用悬停效果。

请参阅下面的动画 GIF，了解我正在谈论的内容：

我给按钮一个透明的背景，这样你就可以看到它后面的链接。当我在 没有 链接的地方点击按钮时，链接（即 Some link ）保持蓝色并且不会更改为红色悬停状态。

但是，当我点击 div 在 恰好位于链接正上方的 位置时，在 div 从 DOM 中删除后，链接将应用其悬停状态。

在每个正确触发其 on.click 事件（警报窗口）后单击链接。

我在 Chrome 上的 android 上 没有 看到这个问题（参见下面的示例）：

您还可以在下面找到我使用的示例 HTML/CSS/JS；设置非常简单。

我想让 iOS 以与 Android Chrome 相同的方式运行：也就是说，单击立即从 DOM 中删除的元素 不应 触发紧随其后的元素的 :hover 状态。

 var button = document.querySelector(".button");
button.addEventListener("click", function() {
  button.parentNode.removeChild(button);
});

var link = document.querySelector('a');
link.addEventListener("click", function() {
  window.alert('clicked!');
});

 a:link    { color: blue }
a:visited { color: blue }
a:hover   { color: red }
a:active  { color: green }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;

    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}

 <a href="#">Some link</a>
<div class="button">Click me!</div>

原文由 romellem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您可以选择禁用悬停，那么您可以通过一些技巧来做到这一点。

首先在“DOMContentLoaded”事件处理程序中添加这一行。

 var canHover = !(matchMedia('(hover: none)').matches);
if (canHover) {
  document.body.classList.add('can-hover');
}

它会将 .can-hover 类添加到您的 html 文档的正文中。

然后只需编辑 a:hover 规则来匹配它

你的 CSS 规则：

 a:hover {
  color: red;
}

应该：

 .can-hover a:hover {
  color: red;
}

这应该可以防止带有触摸屏的设备将悬停样式应用于任何锚点。

原文由 Milan Jaric 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您是否尝试过使用媒体查询来测试 :hover 功能？

请参阅 https://drafts.csswg.org/mediaqueries/#hover

原文由 Josh Palmeri 发布，翻译遵循 CC BY-SA 3.0 许可协议