:hover 在 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 中查看该示例。