CSS鼠標在圖片上懸停時改變透明度由模糊變清淅
編輯：CSS詳解
CSS讓圖片由模糊變清淅，其實主要是使用了CSS Filter濾鏡來實現鼠標懸停時改變圖片的透明度來實現。默認狀態下，圖片的透明度是70，也就是有些透明，讓圖片看上去有點模糊，當鼠標移上的時候，圖片的透明度變為0，也就是不透明了，圖片看上去就清淅了，CSS代碼如下：
01
<style>
02
.highlightit img{
03
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
04
-moz-opacity: 0.5;
05
}
06
.highlightit:hover img{
07
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
08
-moz-opacity: 1;
09
}
10
</style>
CSs代碼寫好了，裡面的透明度值默認是70，你可以試著改變這個值，直到你喜歡。下面就要把上面的CSS定義應用在對象上：
1
<a href="/" class="highlightit"><img border="0" src="/JSCSS/demoimg/wall_s3.jpg"></a>
2
<a href="/" class="highlightit"><img border="0" src="/JSCSS/demoimg/wall_s7.jpg"></a>
最終的運行效果如下，默認狀態下，圖片好似是模糊的，把你的鼠標移上去看下吧：
小編推薦
熱門推薦