是否可以通過javascript將a：hover顏色懸停在元素上？

Question

我想嗅探一下如果將鼠標懸停在鏈接上而不實際將其懸停在鏈接上將變成的顏色。 我要這樣做的原因是，我知道將其更改回使用動畫效果的原因，因為可以通過動態應用各種外觀設置顏色。 我可以使用javascript或jquery進行此操作（還是有其他方法可以執行此操作）？

編輯：我已經使用CSS過渡實現了此功能，但我需要IE9及以下版本的JavaScript

Answer 1

不，不幸的是，這是不可能的：您可以使用getComputedStyle()來檢索有關偽元素（ ::before / ::after ）的信息，但不能檢索:hover偽選擇器。

參考文獻：

• window.getComputedStyle() ^兼容性 。

Answer 2

您可以從樣式表中獲取值： http : //jsfiddle.net/wt3qQ/

// code I found here: http://catcode.com/dominfo/getstyle2.html
function getStyleBySelector( selector )
   {
       var sheetList = document.styleSheets;
       var ruleList;
       var i, j;

       /* look through stylesheets in reverse order that
          they appear in the document */
       for (i=sheetList.length-1; i >= 0; i--)
       {
           ruleList = sheetList[i].cssRules;
           for (j=0; j<ruleList.length; j++)
           {
               if (ruleList[j].type == CSSRule.STYLE_RULE && 
                   ruleList[j].selectorText == selector)
               {
                   return ruleList[j].style;
               }   
           }
       }
       return null;
   }

console.log(getStyleBySelector('a:hover').color);
console.log(getStyleBySelector('#link:hover').color);

Answer 3

如果您打算對顏色進行動畫處理，那么（ 對於現代瀏覽器 ）可以啟用顏色過渡，這樣顏色將自動進行動畫處理:hover

要應用代碼，您可以執行

$('element').css({
   '-webkit-transition':'color 0.5s',
   '-moz-transition':'color 0.5s',
   '-o-transition':'color 0.5s',
   'transition':'color 0.5s',
});