用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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
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
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python如何代码集体右移
2020/07/20 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
编辑个人求职信范文
2013/09/21 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
中专生自荐信
2014/06/25 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
离婚协议书格式范本
2016/03/18 职场文书