：在Firefox上重新加载页面后直接触发悬停（但不是在Mac OS X Chrome上）

Question

请使用a）Firefox和b）Chrome检查this codepen。请按以下步骤操作：

1. 在链接上移动鼠标
2. 点击链接，之后不要移动鼠标光标
3. 等到页面重新加载。

如果您没有移动鼠标光标，则在重新加载页面后它仍然会在链接上方。

Firefox现在将应用:hover样式。

Chrome（Mac OS X）会显示元素处于非悬停状态（这是我喜欢的场景）。

这里的任何人都知道哪个浏览器做得对，以及如何让一个浏览器模仿对方的行为？

对于我目前的情况，我想知道如何避免在页面重新加载后直接触发:hover 。如果我不得不求助于Javascript，我会非常不高兴。

为了完整起见，这是演示代码：

<a href="https://codepen.io/connexo/pen/pEJbqj" target="_top">This Codepen</a>

a {
  color: #333;
  background-color: #ddd;
  display: inline-block;
  line-height: 40px;
  padding: 20px;
  text-decoration: none;
  transition-duration: .4s;
  &:before {
    content: "non-hovered";
  }
  &:hover {
    background-color: #a00;
    color: white;
    &:before {
      content: "hovered state";
    }
  }
}

编辑：正如我的一位同事刚刚告诉我的那样，Chrome似乎只在OS X上以所描述的方式运行，但在Windows上则不行。任何人都可以详细说明整个问题吗？

Answer 1

哪种行为是正确的？

很难说哪个是正确的行为，因为W3C规范没有详细介绍:hover伪类的机制：

  

：hover伪类适用于用户使用指针设备指定元素，但不一定要激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。

The user action pseudo-classes :hover, :active, and :focus

鉴于这种情况，这两种行为似乎都是合理的。

如何避免在页面重新加载后直接触发:hover。

在这种特殊情况下，您似乎要在用户移动鼠标之前禁用悬停状态，为此，您可以执行以下操作：

• 在页面加载时将CSS属性pointer-events: none;添加到链接。这将禁用链接上的任何鼠标事件
• 将一个移动事件附加到body，当用户移动鼠标时，它会被激活一次（之后它会被解除绑定）
• 在移动事件中，在链接上设置pointer-events: auto;以在其上启用鼠标事件

$("a").css("pointer-events", "none");
$("body").one("mousemove", function() {
  $("a").css("pointer-events", "auto");
});

a {
  color: #333;
  background-color: #ddd;
  display: inline-block;
  line-height: 40px;
  padding: 20px;
  text-decoration: none;
  transition-duration: .4s;
}
a:before {
  content: "non-hovered";
}
a:hover {
  background-color: #a00;
  color: white;
}
a:hover:before {
  content: "hovered state";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" target="_top"></a>

最好在Codepen或JS Fiddle中查看该示例，前提是默认情况下折叠了Stack Snippet。