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

问题

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 {
    color: blue;
    font-size: 12px; 
}

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

回答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.

回答2:

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.

回答3:

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).

回答4:

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

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

来源：https://stackoverflow.com/questions/654295/how-get-the-hover-css-style-of-an-anchor-with-jquery

标签

jquery

css

hover

anchor