css3替代JavaScript实现hover变色功能
2016-01-22 23:42
656 查看
在项目中遇到了hover变色的功能,一开始我使用事件onmouseover和onmouseout来监听是否hover,然后用JavaScript函数进行变色,如下:
后来发现css3中可以使用transition属性直接实现,而不需要引入JavaScript,代码如下:
使用transition属性,可以设置css属性的渐变,本例中:
transition:background-color .3s ease-in .0s;
语句的意思是:要渐变的属性为background-color;渐变过程持续3s;渐变的方式为ease-in;延迟0s后开始渐变。
渐变方式可以简单的理解为变化速度的曲线,有多种选择,ease-in是其中一种。
上述方法是transition属性的简写方法,实际上他还可以分割写为四个单独的属性,上边的语句分割后的写法为:
若是需要改变多个属性的渐变,可以使用分开写的方式,属性事件用,分隔,顺序相互对应即可。
//当鼠标移入时圆角矩形变色。 function change_rounded_1(val){ if(val=="mfsy"){ mfsy.style.backgroundColor="#F0EA00"; }else if(val=="tyys"){ tyys.style.backgroundColor="#66CCFF"; } } //当鼠标移出时圆角矩形恢复本来的颜色 function change_rounded_2(){ mfsy.style.backgroundColor="#F2A516"; tyys.style.backgroundColor="#2A55A7"; }
后来发现css3中可以使用transition属性直接实现,而不需要引入JavaScript,代码如下:
#mfsy{ background-color:#FEAD27; -o-transition: background-color .3s ease-in .0s; /* Opera */ -webkit-transition:background-color .3s ease-in .0s; -moz-transition:background-color .3s ease-in .0s; transition:background-color .3s ease-in .0s; } #mfsy:hover{ background-color: #F0EA00; }
使用transition属性,可以设置css属性的渐变,本例中:
transition:background-color .3s ease-in .0s;
语句的意思是:要渐变的属性为background-color;渐变过程持续3s;渐变的方式为ease-in;延迟0s后开始渐变。
渐变方式可以简单的理解为变化速度的曲线,有多种选择,ease-in是其中一种。
上述方法是transition属性的简写方法,实际上他还可以分割写为四个单独的属性,上边的语句分割后的写法为:
transition-property:background-color; transition-duration: .3s; transition-timing-function: ease-in; transition-delay: 0s;
若是需要改变多个属性的渐变,可以使用分开写的方式,属性事件用,分隔,顺序相互对应即可。
相关文章推荐
- coco2dx-js 实现 层拦截 点击响应事件
- perl post json
- 理解javascript函数式编程中的闭包
- Html5、CSS、JavaScript小知识---ios
- Servlet跳转到Jsp的指定div
- JavaScript 冒号(:)详解
- js局部变量和全局变量
- 网页制作学习2----实现对象的传递
- css和javascript的一些笔记(三) 几个简单案例
- Javascript模块化编程:AMD规范
- Javascript模块化编程(三):require.js的用法
- 【JSTL】-EL表达式
- javascript异步实现
- 网页制作学习1----初步认识javascript和html
- 干货分享:让你分分钟学会 javascript 闭包
- extjs form表单的重置
- Arc gis api for js 对地图的简单操作
- js选择不同浏览器点击收藏夹功能(主要是 IE与firefox的区别)
- JavaScript使用正则表达式进行邮箱表单验证实例
- json转对象-对象转json