如何更改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