Question

我创建了一个覆盖页面上某些元素的：hover的函数。它在正常和悬停效果之间消失。我必须在我的CSS文件中创建一个.hover类。我觉得这有点不干净。我怎么能读到：hover伪类内容？

Answer 1

在接受的答案中使用getComputedStyle将无效，因为：

悬停状态的计算样式仅在元素实际处于该状态时可用。
getComputedStyle的第二个参数应为空或伪元素。它不适用于:hover，因为它是伪类。

这是另一种解决方案：

function getCssPropertyForRule(rule, prop) {
    var sheets = document.styleSheets;
    var slen = sheets.length;
    for(var i=0; i<slen; i++) {
        var rules = document.styleSheets[i].cssRules;
        var rlen = rules.length;
        for(var j=0; j<rlen; j++) {
            if(rules[j].selectorText == rule) {
                return rules[j].style[prop];
            }
        }
    }
}

// Get the "color" value defined on a "div:hover" rule,
// and output it to the console
console.log(getCssPropertyForRule('div:hover', 'color'));

Demo

Answer 2

您可以访问document.styleSheets并查找应用于该特定元素的规则。但这并不比使用简单的附加课更清洁。

Answer 3

更新：我不知怎的错了。以下示例不起作用。有关说明，请参阅@bfavaretto's comment。

~~在Firefox，Opera和Chrome或任何其他正确实现window.getComputedStyle的浏览器中非常简单。您只需将“悬停”作为第二个参数传递：~~

<!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>

~~但我不相信除了使用Gumbo建议的document.styleSheets之外，还有Internet Explorer的解决方案。但是会有差异。~~因此，到目前为止，拥有.hover类是最好的解决方案。根本不是不洁净的。

Answer 4

如果这里有任何人使用接受回答的问题但是它不起作用，这可能是一个很好的功能：

function getPseudoStyle(id, style) {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var targetrule = "";
        if (all[i].id === id) {
            if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule
                targetrule=myrules[i]
            }
        }
        return targetrule;
    }
}

Answer 5

有另一种方法可以使用javascript获取:hover伪类。您可以在hover属性中编写content伪类的样式。

p::before,
p::after{
  content: 'background-color: blue; color:blue; font-size: 14px;';
}

然后通过getComputedStyle()方法从中读取：

console.log(getComputedStyle(document.querySelector('p'),':before').getPropertyValue('content'));

阅读：使用javascript悬停伪类

5 个答案: