阅读:使用javascript悬停伪类

Question

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

Answer 1

使用getComputedStyleas作为接受的答案是行不通的,因为:

1. 悬浮状态的计算样式仅在元素实际处于该状态时可用.
2. 第二个参数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'));

演示