用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循环map功能的代码
Feb 26 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
require.js的用法详解
Oct 20 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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/08/07 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
node跨域请求方法小结
2017/08/25 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
Python 字符串定义
2009/09/25 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python对于requests的封装方法详解
2019/01/03 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
如何理解Python中包的引入
2020/05/29 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
检查接待方案
2014/02/27 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang