用jQuery toggleClass 实现鼠标移上变色
更新时间:2014年05月14日 11:18:16 作者:
这篇文章主要介绍了用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实现增加和删除类操作示例
相关文章
jQuery Validation Plugin验证插件手动验证
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持,接下来通过本文给大家介绍jQuery Validation Plugin验证插件手动验证2016-01-01jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
jQuery1.3.2 升级到 1.4.4 ,需要修改的地方,需要的朋友可以参考下。2011-01-01
最新评论