javascript - 读取 :hover pseudo class with javascript

Question

我创建了一个函数来覆盖页面上某些元素的 :hover。它在正常和 :hover 效果之间淡出。因为我必须在我的 CSS 文件中创建一个 .hover 类。我觉得这有点不干净。我如何阅读 :hover 伪类内容？

Answer 1

使用 getComputedStyle正如接受的答案一样，这是行不通的，因为:

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'));

Demo