用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实现增加和删除类操作示例
相关文章
这篇文章主要为大家详细介绍了使用ajaxfileupload.js实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
jQuery autocomplate 自扩展插件、自动完成示例代码
jquery-lib版本是 1.3.2的，该插件是简单的扩展插件，代码也比较简单的封装。所以看起来也比较简单不是很费力，当然封装得也不是很好。2011-03-03
其实这个也不算是 resizable 的BUG,但从官网下载下来的确实存在问题2010-10-10
基于Bootstrap+jQuery.validate实现Form表单验证
这篇文章主要介绍了基于Bootstrap+jQuery.validate实现Form表单验证,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery实现图片随机排列的方法,涉及jQuery操作图片的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
jQuery创建插件的代码分析，需要的朋友可以参考下。2011-04-04
本文整理了一些jquery入门必备的基本知识及相关实例，适合初学者学习，另附一些jquery的常用事件，感兴趣的各位可不要错过了哈2013-06-06
下面小编就为大家带来一篇jquery if条件语句的写法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
主要实现日期的显示，获取年月日，时分秒、星期、判断闰年，学习jquery的朋友可以参考下2012-02-02
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
本文给大家分享的是一款jQuery整屏（全屏）滚动插件网页特效，滚动鼠标滚轮整屏一屏滚动切换代码，可设置文字/图片绝对上下左右居中显示JS代码，时下最流行的jQuery全屏滚动插件！（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）2015-04-04
最新评论