页面刷新时的悬停样式答案

【问题标题】：hover style on page refresh页面刷新时的悬停样式
【发布时间】：2021-12-12 14:56:24
【问题描述】：

如果用户没有移动鼠标，我正在寻找一种简单的方法来在页面刷新时保持“悬停”样式。问题是悬停样式仅在鼠标输入/鼠标悬停事件上触发，因此在页面刷新时，即使光标位于相关项目上方，也不会应用它，直到用户再次触摸鼠标并稍微移动它。下面的代码有这个问题。

$('div').click(function () {
     window.location.reload();
});

div {
   width: 100px;
   height: 100px;
   background: grey;
}
div:hover {
   background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

【问题讨论】：

这能回答你的问题吗？ Remember div hover state after page refresh
请注意，这种行为似乎只存在于 OSX Chrome 中——在我的 OSX Firefox 上，它的行为符合预期。 This question 有更多上下文，尽管其中一个 OP 想要相反的行为。
这发生在 Firefox Windows 中。鼠标移动至少 1 个像素时，悬停效果开始。我觉得很正常。
为什么在 2021 年使用 jQuery？ 8 年多以来，它已经不再需要了。

标签： javascript html css

【解决方案1】：

你能设置a:visited { background-color:black;color:#fff}吗？当然这将适用于整个页面，所以你访问的所有背景都是黑色的。我从未尝试过结婚div a:visited{background-color:black;color:#fff;} so not sure that would work. They say nothing ventured, nothing gained.

【讨论】：