如何獲取元素：懸停樣式？

我需要幫助，我想獲取元素：懸停所有樣式。例如：如何獲取元素：懸停樣式？

<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

如何獲取元素：懸停樣式？

回答

相關問題