1. 程式人生 > >css 設定滑鼠滑過變色效果

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)效果對比: