css 设置鼠标滑过变色效果

1.样式说明：

当鼠标滑过或者悬停在图片上时，图片颜色变灰，看似是图片变灰变色效果，实际上是图片被设置为半透明样式

2.CSS样式代码：

（1）HTML代码：

<div class="sasa-layout" >

<a href="selectType.html">

<div class="sasa-iframe">

<div class="sasa-img">

<img src="../resource/images/22222.png" />

</div>

<span>业务流程</span>

</div>

</a>

</div >

（2）css样式代码：

.sasa-layout a{

float: left; list-style: none;text-decoration: none;color: black;font-family: "微软雅黑";font-size: 24px;

}

.sasa-layout a:hover{

color: #0000FF;

}

.sasa-layout a:hover img{

filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;

}

注意：

filter 设置IE半透明效果，值1-100，值越小越透明，设置IE8以前的版本使用

opacity 设置IE半透明效果，值0.1-1，值越小越透明，设置IE8以后的版本使用

-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同

-wekit-opacity 谷歌浏览器使用等，内核不同的浏览器，写法大致不同

（3）效果对比：