Javascript 可以读取 CSS 中元素的 :hover 状态吗？ [复制]答案

【问题标题】：Can Javascript read from an element's :hover state in CSS? [duplicate]Javascript 可以读取 CSS 中元素的 :hover 状态吗？ [复制]
【发布时间】：2015-10-06 10:11:09
【问题描述】：

在我的页面上，我有几个 div，当光标悬停在它们上面时，它们会改变它们的背景图像。设置类似于这样：

#myDiv1 {
  background-image: url("http://example.com/firstImage.png");
}
#myDiv1:hover {
  background-image: url("http://example.com/secondImage.png");
}
#myDiv2 {
  background-image: url("http://example.com/thirdImage.png");
}
#myDiv2:hover {
  background-image: url("http://example.com/fourthImage.png");
}

<div id="myDiv1">Hello</div>
<div id="myDiv2">World</div>

我想使用 JavaScript 读取每个 div 的 :hover 背景的 URL，而不需要调用 :hover 状态本身。有没有可以检索该数据的选择器？

【问题讨论】：

检查.hover 事件api.jquery.com/hover
@Amr Elgarhy 在我看来 .hover 事件用于触发函数而不是检索数据。我不认为这是我要找的。span>
@NickD 不，它不会触发悬停，它会监视悬停，'在鼠标指针进入和离开元素时执行'
你可以在 styleSheet 对象上迭代 cssRules，这样你就可以看到选择器（包括伪类）

标签： javascript jquery html css

【解决方案1】：

更新：此答案无效，并且没有 100% 准确的方法来获取此信息。 Window.getComputedStyle() 的第二个参数是伪元素，:hover 是伪类。有关更多信息，请参阅重复问题：Read :hover pseudo class with javascript

~~你可以像这样使用Window.getComputedStyle()：~~

var style = window.getComputedStyle(document.querySelector("#myDiv1"), ":hover").getPropertyValue("background-image");
alert(style);

#myDiv1 {
  background-image: url("http://example.com/firstImage.png");
}
#myDiv1:hover {
  background-image: url("http://example.com/secondImage.png");
}
#myDiv2 {
  background-image: url("http://example.com/thirdImage.png");
}
#myDiv2:hover {
  background-image: url("http://example.com/fourthImage.png");
}

<div id="myDiv1">Hello</div>
<div id="myDiv2">World</div>

【讨论】：