如何更改css：悬停？

Question

可能重复：
How do I access style properties of pseudo-elements with jQuery?

首先，悬停块将轮换40deg！

如何更改.block：单击按钮时从40deg悬停到80deg？

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

更改类，而不是

<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

你可以点击这些都是必要的样式添加一个类，试试这个

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


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

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

}); 

Answer 3

您可以通过通过jQuery添加类做到这一点。

例子：

的jQuery

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

CSS

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

的jsfiddle例如这里：http://jsfiddle.net/peduarte/XFPPn/

Answer 4

看看这jQuery的插件，可以帮助你与变换属性在css jquery-css-transform