css3替代JavaScript实现hover变色功能

在项目中遇到了hover变色的功能，一开始我使用事件onmouseover和onmouseout来监听是否hover，然后用JavaScript函数进行变色，如下：

//当鼠标移入时圆角矩形变色。
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;

若是需要改变多个属性的渐变，可以使用分开写的方式，属性事件用，分隔，顺序相互对应即可。