用jQuery toggleClass 实现鼠标移上变色


Posted in Javascript onMay 14, 2014

按钮移上变色效果

<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>
Javascript 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery ztree实现下拉树形框使用到了json数据
May 14 #Javascript
JQuery性能优化的几点建议
May 14 #Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 #Javascript
JQuery教学之性能优化
May 14 #Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
javascript 中that的含义示例介绍
May 14 #Javascript
table insertRow、deleteRow定义和用法总结
May 14 #Javascript
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
详解jQuery事件
2017/01/13 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
祖国在我心中演讲稿
2014/01/15 职场文书
电子信息专业自荐书
2014/02/04 职场文书
生物技术专业求职信
2014/06/10 职场文书
社团活动总结模板
2014/06/30 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
python解析json数据
2022/04/29 Python