How to get css hover values on click?

Question

Following up on this question, I have another issue - how to get css hover values when you click on a text link?

For instance, I have these values for the text hover

Answer 1

Take a look here

It's a re-implementation (read: duck punching) of the .css() method

And here's the DEMO

Answer 2

The right way to do this seems like it would be to create a style tag and re-assign the hover property directly. I have a working example here.

(Credit where credit is due -- I got that from a function defined here)

Answer 3

HTML changes, adding an extra class:

<a href="" class="test apply-hover">Click Me</a>

CSS changes, modify hover selector:

a.test.apply-hover:hover { ...

JS changes, remove 'apply-hover' class on click event:

$(this).removeClass('apply-hover');

Example: http://jsfiddle.net/bGKE7/1/

Answer 4

You could do something like this, where you create your own list of css properties that would be applied to that element (assuming you had a list) and then cycle through them:

var cssList = ['text-decoration','opacity','filter'];

$(".test").click(function(){
    for(x in cssList){
        alert($(this).css(cssList[x]));
    }    
   return false;
})

Example: http://jsfiddle.net/jasongennaro/GmWCz/

Of course, you could take this all the way and add all the properties, if that is what you needed.