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

时间:2014-01-28 17:38:12

标签: javascript jquery html css iframe

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

示例:Opacity Google iframe

我正在考虑将另一个div放在iframe上面并给它一个白色,将不透明度改为最高60%,当悬停时它变为100%。不确定我是否正确行事,以及将“position:absolute”和“position:relative”置于何处。

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

1 个答案:

答案 0 :(得分: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;
}

更新 - 添加转换:

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