我的网页(联系页面)上有一个 google maps iframe,现在我试图让 iframe 显示 60% 的不透明度,但是当悬停 iframe 时它变成 100%。
我正在考虑将另一个 div 放在 iframe 的顶部并给它一个白色,将不透明度更改为 60%,当悬停时它变为 100%。不确定我做的是否正确,以及“position: absolute”和“position: relative”的位置。
仅使用 CSS 和 HTML 可以实现吗?
最佳答案
我已经为不透明度添加了 vendor 前缀,现在它应该有完整的浏览器支持。试一试。
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;
}
更新 - 添加转换:
iframe{
transition:all 1s linear;
-o-transition:all 1s linear;
-moz-transition:all 1s linear;
-webkit-transition:all 1s linear;
}
关于javascript - 谷歌iframe在悬停时更改不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21412774/