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

Question

What i would like to do is this:

In my website, i want to have a div in the left corner that, when the mouse is NOT over it, its just a simple square with a color (for now).

For that, i have this code:

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

Its very simple of course, in my 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;
}

Ok so for now this does it. Now what i would like to appear on this div when i MOUSEOVERIT, would be it show a iframe:

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

Is this possible at all? If so, what would i have to do? I understand a bit of javascript if needed, but no so much of jQuery, so if jQuery is needed please tell me exactly what i must do and where to put the code.

Thank you so much in advance

Answer 1

Instead of using id for div pls put id for 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

Lay the div over the iframe, and change the z-index of each on hover.

<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/