怎樣用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瀏覽器設置，例如火狐，語法與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="/static/imghwm/default1.png"  data-src="images/p-a-bg.png"  class="lazy"   / alt="怎樣用CSS讓滑鼠懸停在圖片上圖片變灰" ></a></p> 
<p class="p2"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/an.gif"  class="lazy"   / alt="怎樣用CSS讓滑鼠懸停在圖片上圖片變灰" ></a></p>

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

相關閱讀：

原生js的常用方法整理

#用Vue+CSS3怎麼做互動特效

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

以上是怎樣用CSS讓滑鼠懸停在圖片上圖片變灰的詳細內容。更多資訊請關注PHP中文網其他相關文章！