css 設定滑鼠滑過變色效果
阿新 • • 發佈:2019-01-26
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)效果對比: