CSS鼠標懸停圖片上圖片變灰 變色 半透明

CSS鼠標懸停圖片上圖片變灰 變色 半透明

DIV CSS鼠標移動懸停在圖片上圖片變色或半透明變化效果實現，CSS鼠標懸停圖片上圖片變灰、圖片變色、圖片半透明

1、DIVCSS5介紹與說明：   -   TOP

看到網頁中的圖片當鼠標移動到圖片上時（鼠標懸停在圖片上）圖片變灰，看似變色變灰效果，實際是圖片被CSS設置爲半透明樣式。

2、關鍵CSS代碼：   -   TOP

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的支持。

3、鼠標移動到圖片變色，圖片半透明實例   -   TOP

實例案例描述：設置兩個DIV盒子，兩個盒子分別放入一張圖，經過對其設置鼠標懸停(:hover)時圖片半透明爲80%和70%，觀察其效果。

一、關鍵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}

這裏設置了對DIV對象盒子裏的超連接內圖片設置hover僞類半透明效果。