用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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
php 301转向实现代码
2008/09/18 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
python中import reload __import__的区别详解
2017/10/16 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python开发入门——set的使用
2020/09/03 Python
软件测试题目
2013/02/27 面试题
黄继光的英雄事迹材料
2014/02/13 职场文书
家长写给老师的建议书
2014/03/13 职场文书
合作协议书
2014/04/23 职场文书
公共场所标语
2014/06/30 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书