CSS怎么實現(xiàn)鼠標(biāo)懸停圖片上圖片變灰

本文小編為大家詳細介紹“CSS怎么實現(xiàn)鼠標(biāo)懸停圖片上圖片變灰”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“CSS怎么實現(xiàn)鼠標(biāo)懸停圖片上圖片變灰”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

一、DIVCSS5介紹與說明：   

看到網(wǎng)頁中的圖片當(dāng)鼠標(biāo)移動到圖片上時（鼠標(biāo)懸停在圖片上）圖片變灰，看似變色變灰效果，實際是圖片被CSS設(shè)置為半透明樣式。

二、關(guān)鍵CSS代碼：   

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

此CSS代碼作用，設(shè)置鼠標(biāo)移動到A超鏈接時，超鏈接內(nèi)圖片（img）呈現(xiàn)半透明顯示80%效果。

解釋：
filter 設(shè)置平臺IE半透明效果樣式，值1-100，值越小越透明，設(shè)置IE8以前的透明使用
opacity 設(shè)置IE半透明效果樣式，值0.1-1，值越小越透明，設(shè)置IE8以后版本的透明使用
-moz-opacity 對非IE瀏覽器設(shè)置，比如火狐，語法與IE相同

此設(shè)置CSS樣式opacity、filter在IE6中不支持，因為現(xiàn)在IE6版本占有急劇下滑，所以一般不考慮IE6對此CSS的支持。

三、鼠標(biāo)移動到圖片變色，圖片半透明實例   過對其設(shè)置鼠標(biāo)懸停(:hover)時圖片半透明為80%和70%，觀察其效果。

1、關(guān)鍵CSS代碼

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

這里設(shè)置了對DIV對象盒子里的超鏈接內(nèi)圖片設(shè)置hover偽類半透明效果。

2、關(guān)鍵HTML代碼

<p>鼠標(biāo)移動到圖片懸停時，圖片變色濾鏡效果：</p> <div class="div1"><a href="#"><img src="images/div-a-bg.png" /></a></div> <div class="div2"><a href="#"><img src="images/an.gif" /></a></div>

3、效果對比截圖

讀到這里，這篇“CSS怎么實現(xiàn)鼠標(biāo)懸停圖片上圖片變灰”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。