编程 Javascript

用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 拼图游戏面向对象，注释完整。

Jun 18 Javascript

JavaScript 变量基础知识

Nov 07 Javascript

JavaScript实现在标题栏上显示当前日期的方法

Mar 19 Javascript

jQuery子窗体取得父窗体元素的方法

May 11 Javascript

浅析jQuery Ajax请求参数和返回数据的处理

Feb 24 Javascript

jQuery自定义插件详解及实例代码

Dec 29 Javascript

详解Require.js与Sea.js的区别

Aug 05 Javascript

小程序开发基础之view视图容器

Aug 21 Javascript

怎么使用javascript深度拷贝一个数组

Jun 06 Javascript

JavaScript内置对象math,global功能与用法实例分析

Jun 10 Javascript

layui表格数据复选框回显设置方法

Sep 13 Javascript

浅谈Vue开发人员的7个最好的VSCode扩展

Jan 20 Vue.js

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 301转向实现代码

2008/09/18 PHP

PHP爆绝对路径方法收集整理

2012/09/17 PHP

Yii操作数据库的3种方法

2014/03/11 PHP

PHP中的静态变量及static静态变量使用详解

2015/11/05 PHP

关于js拖拽上传 [一个拖拽上传修改头像的流程]

2011/07/13 Javascript

Javascript代码在页面加载时的执行顺序介绍

2013/05/03 Javascript

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

2015/12/03 Javascript

一篇文章掌握RequireJS常用知识

2016/01/26 Javascript

jquery实现下拉框功能效果【实例代码】

2016/05/06 Javascript

微信小程序（应用号）简单实例应用及实例详解

2016/09/26 Javascript

谈谈因Vue.js引发关于getter和setter的思考

2016/12/02 Javascript

微信小程序五星评分(包括半颗星评分)实例代码

2016/12/14 Javascript

一步一步的了解webpack4的splitChunk插件(小结)

2018/09/17 Javascript

总结javascript三元运算符知识点

2018/09/28 Javascript

分享5个小技巧让你写出更好的 JavaScript 条件语句

2018/10/20 Javascript

vue webpack重写cookie路径的方法

2019/07/10 Javascript

vue中在vuex的actions中请求数据实例

2019/11/08 Javascript

[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3

2018/06/04 DOTA

python用字典统计单词或汉字词个数示例

2014/04/22 Python

详解Python2.x中对Unicode编码的使用

2015/04/03 Python

python调用java模块SmartXLS和jpype修改excel文件的方法

2015/04/28 Python

python中import reload __import__的区别详解

2017/10/16 Python

详解从Django Rest Framework响应中删除空字段

2019/01/11 Python

Python数据类型之String字符串实例详解

2019/05/08 Python

Python列表(list)所有元素的同一操作解析

2019/08/01 Python

python 使用socket传输图片视频等文件的实现方式

2019/08/07 Python

tensorflow 限制显存大小的实现

2020/02/03 Python

python实现四人制扑克牌游戏

2020/04/22 Python

python开发入门——set的使用

2020/09/03 Python

软件测试题目

2013/02/27 面试题

黄继光的英雄事迹材料

2014/02/13 职场文书

家长写给老师的建议书

2014/03/13 职场文书

合作协议书

2014/04/23 职场文书

公共场所标语

2014/06/30 职场文书

公司员工违法违章行为检讨书

2019/06/24 职场文书

2019个人工作自我评价范文（3篇）

2019/09/19 职场文书