Question

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

＆＃13;

#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");
}

＆＃13;

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

＆＃13;

我想使用JavaScript阅读每个div :hover背景的网址，而无需调用:hover状态本身。有没有可以检索数据的选择器？

Answer 1

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

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

＆＃13;

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

＆＃13;

#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");
}

＆＃13;

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

＆＃13;

Javascript可以从元素中读取：CSS中的悬停状态吗？

1 个答案: