用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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Opacity.js
Jan 22 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
JS制作简易计算器的实例代码
Jul 04 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
Vue渲染函数详解
2017/09/15 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python 字符串只保留汉字的方法
2018/11/16 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
2014年置业顾问工作总结
2014/11/17 职场文书
介绍信范文大全
2015/05/07 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书