谷歌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; 
}