怎樣用CSS讓滑鼠移至上方在圖片上圖片變灰

我們常常在網頁中看到這樣一種效果，當你的滑鼠移動到圖片上的時候，圖片變灰，或者變暗，這實際是圖片被CSS設定為半透明樣式。下面就給大家做一個執行個體看一下這種效果怎麼實現

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

此CSS代碼作用，設定滑鼠移動到A超連結時，超連結內圖片（img）呈現半透明顯示80%效果。

解釋：

filter 設定平台IE半透明效果樣式，值1-100，值越小越透明，設定IE8以前的透明使用

opacity 設定IE半透明效果樣式，值0.1-1，值越小越透明，設定IE8以後版本的透明使用

-moz-opacity 對非IE瀏覽器設定，比如Firefox，文法與IE相同

此設定CSS樣式opacity、filter在IE6中不支援，因為現在IE6版本佔有急劇下滑，所以一般不考慮IE6對此CSS的支援。

滑鼠移動到圖片變色，圖片半透明執行個體

執行個體案例描述：設定兩個DIV盒子，兩個盒子分別放入一張圖，通過對其設定滑鼠移至上方(:hover)時圖片半透明為80%和70%，觀察其效果。

1、關鍵CSS代碼

.p1,.p2{ width:500px; margin:20px auto} .p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} .p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

這裡設定了對DIV對象盒子裡的超連結內圖片設定hover偽類半透明效果。

2、關鍵HTML代碼

<p>滑鼠移動到圖片懸停時，圖片變色濾鏡效果：</p> <p class="p1"><a href="#"><img src="images/p-a-bg.png" /></a></p> <p class="p2"><a href="#"><img src="images/an.gif" /></a></p>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

原生js的常用方法整理

用Vue+CSS3怎麼做互動特效

詳解前端響應式布局、響應式圖片，與自製柵格系統