How to change css :hover?

Question

Possible Duplicate:
How do I access style properties of pseudo-elements with jQuery?

First,hover the block will rotation 40deg!!

How to change .block:hover from 40deg to 80deg when click button ??

CSS

<style type="text/css">

.block{
    -moz-transition:All 1s ease;
    -moz-transform: rotate(1deg);

    width:200px; height:100px;
background-color:#999;
}
.block:hover{
    -moz-transform: rotate(40deg);
}

</style>

HTML

<button id="change">&raquo; Run</button><br><br>
<div class="block">TEST</div>

JS

<script>
$("#change").click(function(){

//???

});
</script>

Answer 1

Change the class instead

<style type="text/css">

.block, .block-80{
    -moz-transition:All 1s ease;
    -moz-transform: rotate(1deg);

    width:200px; height:100px;
background-color:#999;
}
.block:hover{
    -moz-transform: rotate(40deg);
}
.block-80:hover{
    -moz-transform: rotate(80deg);
}

</style>

JS

<script>
$("#change").click(function(){

  $('.block').removeClass('block').addClass('block-80');

});
</script>

Answer 2

You can add a class on click which have the required style, try this

.rotate80deg{
    -moz-transform: rotate(80deg);
}


$("#change").click(function(){

   $(this).addClass('rotate80deg');

});

Answer 3

You could do it by adding a class via jQuery.

Example:

jQuery

$('#change').click(function(){
    $(this).toggleClass('on');
});

CSS

.on {
    -moz-transform: rotate(80deg);
}

jsFiddle example here: http://jsfiddle.net/peduarte/XFPPn/

Answer 4

Take a look at this jquery addin that can help you with the transform property in css jquery-css-transform