用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 UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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
php 获取远程网页内容的函数
2009/09/08 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
python多重继承实例
2014/10/11 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python模块搜索路径代码详解
2018/01/29 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python tcp传输代码实例解析
2020/03/18 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
护士辞职信怎么写
2015/02/27 职场文书
追悼词范文大全
2015/06/23 职场文书
董事长开业致辞
2015/07/29 职场文书
PHP解决高并发问题
2021/04/01 PHP