在项目中遇到了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";
}
#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;