用jQuery toggleClass 实现鼠标移上变色
作者：
这篇文章主要介绍了用jQuery toggleClass 实现鼠标移上变色,需要的朋友可以参考下
按钮移上变色效果
<style>
.round-corner-btn {
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width:200px; height:40px; line-height: 40px;
background: green;
display:inline-block;
color:white;
text-align : center;
cursor: pointer;
}
.avatar_size{
font-size:12px;
text-align: center;
margin-top:4px;
}
.btn-hover{
opacity: 0.8;
}
</style>
<div class='round-corner-btn'> 按钮</div>
<script>
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
</script>
复制代码 代码如下:
<style>
.round-corner-btn {
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width:200px; height:40px; line-height: 40px;
background: green;
display:inline-block;
color:white;
text-align : center;
cursor: pointer;
}
.avatar_size{
font-size:12px;
text-align: center;
margin-top:4px;
}
.btn-hover{
opacity: 0.8;
}
</style>
<div class='round-corner-btn'> 按钮</div>
<script>
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
</script>
您可能感兴趣的文章:
- 使用JS实现jQuery的addClass, removeClass, hasClass函数功能
- jQuery使用addClass()方法给元素添加多个class样式
- jQuery中addClass()方法用法实例
- Jquery.addClass始终无效原因分析
- jQuery源码解读之addClass()方法分析
- jQuery中removeClass()方法用法实例
- jQuery使用removeClass方法删除元素指定Class的方法
- jQuery源码解读之removeClass()方法分析
- jQuery中toggleClass()方法用法实例
- jQuery使用toggleClass方法动态添加删除Class样式的方法
- JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例