I want to sniff the color which a link would bee if I hovered over it without actually hovering over it. The reason I want to do this is so I know what to change it back to using animate as the colour can be set via various skins which would be applied dynamically. Can I do this using javascript or jquery ( or is there any other way to do it ) ?

Edit: I already have implemented this using CSS transitions but I need the javascript for IE9 and below

I want to sniff the color which a link would bee if I hovered over it without actually hovering over it. The reason I want to do this is so I know what to change it back to using animate as the colour can be set via various skins which would be applied dynamically. Can I do this using javascript or jquery ( or is there any other way to do it ) ?

Edit: I already have implemented this using CSS transitions but I need the javascript for IE9 and below

• javascript
• jquery
• html
• css
• dom

• I don't think you can get the attributes of the psuedo selectors – Sushanth -- Commented Nov 30, 2012 at 18:56

3 Answers 3

No, this isn't possible unfortunately: you can use getComputedStyle() to retrieve information about pseudo-elements (::before/::after), but not the :hover pseudo-selector.

References:

• window.getComputedStyle() ^patibility.

You can get the value from the stylesheets: http://jsfiddle/wt3qQ/

// code I found here: http://catcode./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);

If you mean to animate the color, then (for modern browsers) you could enable transitions for the color and that way it will animate automatically to whatever it bees on :hover

To apply with code you could do

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