Jquery 如何更改css:悬停？

可能重复：

首先，将滑块悬停，使其旋转40度

如何更改。阻止：单击按钮时将鼠标悬停在40度到80度之间

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>

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

//???

});
</script>

.街区{
-moz转换：所有1秒轻松；
-moz变换：旋转（1deg）；
宽度：200px；高度：100px；
背景色：#999；
}
.block:悬停{
-moz变换：旋转（40度）；
}

HTML

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

”；运行


试验

JS

<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>

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

//???

});
</script>

$（“#更改”）。单击（函数（）{
//???
});

改为更改类

<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>

.block、.block-80{
-moz转换：所有1秒轻松；
-moz变换：旋转（1deg）；
宽度：200px；高度：100px；
背景色：#999；
}
.block:悬停{
-moz变换：旋转（40度）；
}
.布洛克-80：悬停{
-moz变换：旋转（80度）；
}

JS

$（“#更改”）。单击（函数（）{
$（'.block'）.removeClass（'block'）.addClass（'block-80'）；
});

您可以单击添加具有所需样式的类，请尝试以下操作

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


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

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

});

---

您可以通过jQuery添加一个类来实现这一点

例如：

jQuery

CSS

---

JSFIDLE示例：

看看这个jquery插件，它可以帮助您使用css中的transform属性

：active{-moz transform（80deg）；}

？

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