用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跨页面保存变量做菜单的方法
Jan 17 Javascript
JS 遮照层实现代码
Mar 31 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
Ajax基础知识详解
Feb 17 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python模块之paramiko实例代码
2018/01/31 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
华为的Java面试题
2014/03/07 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
晚归检讨书
2014/02/19 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
评先进个人材料
2014/12/29 职场文书
个性发展自我评价2015
2015/03/09 职场文书