阅读:hover伪类与javascript [英] Read :hover pseudo class with javascript

查看:92
本文介绍了阅读:hover伪类与javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我做了一个函数,覆盖了:hover的一些页面上的元素。它在正常和悬停效果之间渐变。这对我必须在我的CSS文件中创建一个.hover类。我想这有点不洁。我如何读取:hover伪类内容?

I made a function that overwrite the the :hover of some elements on a page. It fades between the normal and the :hover effect. That for i had to create a .hover class in my CSS file. I think this is a little unclean. How could i read the the :hover pseudo class contents?

推荐答案

UPDATE :我错了。以下示例不工作。有关说明,请参见 @ bfavaretto的评论

UPDATE: I somehow got this wrong. The below example doesn't work. See @bfavaretto's comment for an explanation.

在Firefox,Opera和Chrome或任何其他正确实现 window.getComputedStyle 非常简单。您只需要传递hover作为第二个参数:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
  display: block;
  width: 200px;
  height: 200px;
  background: red;
}
div:hover {
  background: green;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var style = window.getComputedStyle(div, "hover");
    alert(style.backgroundColor);
};
</script>
</body>
</html>

但我不相信Internet Explorer还没有解决方案, code> document.styleSheets 作为Gumbo建议。但是会有差异。所以,有一个 .hover 类是目前为止最好的解决方案。不干净。

But I don't believe there's yet a solution for Internet Explorer, except for using document.styleSheets as Gumbo suggested. But there will be differences. So, having a .hover class is the best solution so far. Not unclean at all.

这篇关于阅读:hover伪类与javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆