谷歌iframe更改不透明度懸停

Question

我的網頁（聯繫頁面）中有一個谷歌地圖iframe，現在我試圖讓iframe顯示不透明度爲60％，但是當懸停iframe時它變成100％。

例子：Opacity Google iframe

我考慮要在iframe的頂部的另一個DIV，並給它一個白色，不透明度改前60％和徘徊它更改爲100％時。不知道我是否做得對，以及把「職位：絕對」和「職位：相對」放在哪裏。

這是隻能用CSS和HTML實現的嗎？

Answer 1

我已經爲opacity添加了供應商前綴，現在它應該有全面的瀏覽器支持。試一試。

iframe{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6; 
} 

iframe:hover{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    -moz-opacity: 1; 
    -khtml-opacity: 1; 
    opacity: 1; 
} 

UPDATE - 添加轉場：

iframe{ 
    transition:all 1s linear; 
    -o-transition:all 1s linear; 
    -moz-transition:all 1s linear; 
    -webkit-transition:all 1s linear; 
}