如何获得元素：悬停样式？ [复制]答案

【问题标题】：How can I get element:hover style? [duplicate]如何获得元素：悬停样式？ [复制]
【发布时间】：2014-04-13 17:32:06
【问题描述】：

我需要帮助，我想获取 element:hover all 样式。例如：

<style type="text/css">
a {color: red;}
a:hover {color: blue;}
</style>

使用jquery我们可以找到“a”元素的默认样式：

$('a').css('color');

它将作为字符串返回：“red”;

但现在我想获得伪样式，像这样：

$('a:hover').css('color');

它会返回“未定义”，但我们需要“蓝色”。

请帮我解决这个问题...

【问题讨论】：

Javascript 不支持伪类
好像这是 4 年前的事了，但我最终来到了这里，它被标记为重复但没有说明它是什么重复的？

标签： javascript jquery html css

【解决方案1】：

纯 Javascript 做到了！

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];
                }
            }
        }
    }

 alert("Hovered Colour is "+getCssPropertyForRule('a:hover', 'color'));

这是一个工作示例 jsfiddle

【讨论】：

这仅在您碰巧知道 CSS 中使用的确切选择器时才有效...
非常感谢！！！我将它与另一个函数结合使用来更改 a 和 a:hover 颜色。我需要通过一个按钮（对于我的网络应用程序）来做到这一点，所以我不能单独依赖 CSS。

【解决方案2】：

这是因为没有 a 类型为 :hover 的元素。所以它总是会返回一个undefined。

而且我不认为你可以使用 jQuery 或 JavaScript 获取伪类属性，直到你获得所有样式然后检查该文件中元素的属性。

【讨论】：

【解决方案3】：

var color = window.getComputedStyle(
    document.querySelector('a'), ':hover'
).getPropertyValue('color')

查看this link 了解更多信息。

【讨论】：

这不适用于悬停
stackoverflow.com/questions/11495535/…

【解决方案4】：

您可以改用.hover() 函数。 http://api.jquery.com/hover/

$( "a.foo" ).hover(
  function() {
    $( this ).css( 'color','red' );
  }, function() {
    $( this ).css( 'color','blue');
  }
);

【讨论】：