如何获取元素：悬停样式？

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

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

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

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

，这将是回报的字符串： “红”;

但现在我想假的风格，就像这样：

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

，这将是返回“不确定”，但我们需要的“蓝色”。

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

来源

2014-04-13 Developer9621

JavaScript不支持伪类 – adeneo

Pure Javascript does it！

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

来源

2014-04-13 09:30:11 natchkebiailia

这只适用于如果你碰巧知道在CSS中使用的确切选择器... –

非常感谢你！我将它与另一个函数结合使用来改变''''a'''''a：hover'''的颜色。我需要通过一个按钮（用于我的网络应用）来完成，所以我不能单靠CSS。 – Supertecnoboff

那是因为没有元素a与:hover型。所以它总是会返回undefined。

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

来源

2014-04-13 09:17:16

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

检查this link了解更多信息。

来源

2014-04-13 09:24:33 Hatsjoem

这并不悬停 – Rhys

https://stackoverflow.com/questions/11495535/why-doesnt-getcomputedstyle-work-with-pseudo-classes-like工作-hover – samdd

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

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

来源

2014-04-13 09:32:06

如何获取元素：悬停样式？

回答

相关问题