带iframe的Div（隐藏并显示iframe）

Question

我想做的是这样的：

在我的网站中，我想在左上角有一个div，当鼠标不在其上方时，它只是一个带有颜色的简单正方形（目前）。

为此，我有以下代码：

<div id='bot'>
</div>

当然，在我的CSS中非常简单：

#bot{
  position: fixed !important;
  bottom: 40px !important;
  width:50px;
  height:150px;
  left:0%;
  border:1px solid black;
  box-shadow:1px 1px 1px;
}

#bot:hover{
  width:500px;
}

好的，现在就可以了。 现在，当我使用MOUSEOVERIT时，我想在此div上显示的是iframe：

<iframe name='botframe' src='http://demo.vhost.pandorabots.com/pandora/talk?botid=a431414a6e34774c' frameborder='0' scrolling='no'></iframe>

这有可能吗？ 如果是这样，我该怎么办？ 如果需要，我会了解一些javascript，但是不需要jQuery，因此，如果需要jQuery，请确切地告诉我我必须做什么以及将代码放置在何处。

提前谢谢你

Answer 1

而不是将ID用于div pls，而将ID用于iframe，

<div> <iframe **id='bot'** name='botframe' src='http://demo.vhost.pandorabots.com/pandora/talk?botid=a431414a6e34774c' frameborder='0' scrolling='no'></iframe>
</div>

Answer 2

将div放在iframe上，并在悬停时更改每个div的z索引。

<iframe id='botframe' name='botframe' src='http://placehold.it/50/' frameborder='0' scrolling='no'></iframe>
<div id='bot'></div>

#bot{position:fixed; background:pink; bottom:40px; width:50px; height:150px; left:0; border:1px solid black;}
#botframe {position:fixed; background:yellow; bottom:40px; width:50px; height:150px; left:0; border:1px solid red;}
#bot:hover{z-index:-1;}
#botframe:hover{z-index:100;}

http://jsfiddle.net/gcWeC/