谷歌 iframe 在悬停时更改不透明度

Question

我的网页上有一个谷歌地图 iframe（在联系页面中），现在我试图让 iframe 显示不透明度 60%，但是当悬停 iframe 时它变成 100%。

示例：Opacity Google iframe

我正在考虑在 iframe 顶部放置另一个 div 并将其设置为白色，将不透明度更改为 60%，当悬停时将其更改为 100%。不确定我是否做得对，以及将“位置：绝对”和“位置：相对”放在哪里。

这只能通过 CSS 和 HTML 实现吗？

Answer 1

我已经为不透明度添加了供应商前缀，现在它应该具有完整的浏览器支持。试一试。

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