How get the :hover css style of an anchor with jQuery?

Question

How can i get the :hover in css stylesheet on the fly with jquery?

stupid example:

a.foo {
    color: red;
    font-size: 11px;
}

a.foo:hover {
            


        

Answer 1

If you really need to, you can access this information throught the document.styleSheet property. An example is available here: http://jsfiddle.net/Xm2zU/1/

Please note that IE would need its own code to do this as it uses ".rules" rather than ".cssRules" etc.

Answer 2

how to retrieve that color and font-size before that mouse will go over the anchor?

No. You cannot retrieve the style declarations of a :hover pseudo class before hovering your mouse over that element. This is because JavaScript can only interact with the HTML using DOM. The style information (for the hovered state) is not available to the DOM unless there is a mouseover on the element and hence you cannot retrieve those values(even by simulating a hover state).

Answer 3

You can use .hover() function instead. http://api.jquery.com/hover/

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

Answer 4

Take a look at Extra selectors for jQuery.

Also, you can use the hover event, depending on what you want to achieve. See: jQuery hover and class selector.