Google地图iframe在Chrome中显示得太快。为什么？

这是我制作的网站... http://matiny.zxq.net/dubai.html 在Chrome中，只要将鼠标悬停在#container div（换句话说，菜单区域，大约20px下方），就会显示地图iframe。Google地图iframe在Chrome中显示得太快。为什么？

下面是一些相关的代码，因为Ctrl + U在读取时有点不方便。

HTML：

<li class="about"> 
      <p class="top-content">... </p> 
      <center> 
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d231284.91692932326!2d55.22984434999998!3d25.073857950000008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f43496ad9c645%3A0xbde66e5084295162!2sDubai!5e0!3m2!1sen!2sus!4v1397322799075" width="930" height="425" frameborder="0" style="border:0"></iframe> 
      </center> 
      </li>

CSS：

#container { 
    height: 150px; 
    width: 1300px; 
    margin: 0 auto; 
    overflow: hidden; 
    transition: height .3s; 
} 
#container:hover { 
    height: 800px; 
    width: 1300px; 
    margin: 0 auto; 
    overflow: hidden; 
}

谢谢！

来源

2014-04-20 BigDaddyMat

看来你正在将CSS应用到错误的元素。

我想只有当你悬停在.about元素上时，地图才会出现，而不是菜单容器（#container）本身。

另外，您应该重构您的标记，以便地图容器位于li元素内。

然后，你可以做这样的事情：

li:hover .map-container, .map-container:hover 
{ 
    display:block; 
}

来源

2014-04-20 21:02:01

我竟然想通了，而你正在编辑的回应。谢谢，但我做了不同的事情。我使用了不透明度，并将其设置为在大约悬停时显示不透明度。 – BigDaddyMat

Google地图iframe在Chrome中显示得太快。为什么？

回答

相关问题