如何获取元素:悬停样式

How can I get element:hover style?

本文关键字：元素 悬停 样式 获取 何获取      更新时间：2023-09-26

我需要帮助，我想获得元素：悬停所有样式。例如：

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

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

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

并且它将以字符串的形式返回："red"；

但现在我想得到伪样式，比如：

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

它将返回"undefined"，但我们需要"blue"。

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

纯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

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

我认为，在获得所有样式并在该文件中检查元素的属性之前，您无法使用jQuery或JavaScript获得伪类属性。

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

请查看此链接以获取更多信息。

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

$( "a.foo" ).hover(
  function() {
    $( this ).css( 'color','red' );
  }, function() {
    $( this ).css( 'color','blue');
  }
);
相关文章：