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）效果对比：