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

a.test {
    text-decoration:none;
}

a.test:hover {
    text-decoration:none;
    opacity:0.6 !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter:alpha(opacity=60) !important; 
}

<a href="#" class="test">Click Me</a>

this fails of course!

$(".test").click(function(){
   alert($(this).css());
   return false;
})

Is it possible?

I came across this similar question but I prefer not to use that plugin.

Answer 1

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.

Answer 2

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 3

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 4

Take a look here

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

And here's the DEMO