我想做的是:
在我的网站中,我想在左角有一个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,请告诉我必须做什么以及将代码放在哪里。
提前非常感谢
不要将id用于div,而是将id用于iframe、
<div> <iframe **id='bot'** name='botframe' src='http://demo.vhost.pandorabots.com/pandora/talk?botid=a431414a6e34774c' frameborder='0' scrolling='no'></iframe>
</div>
将div放在iframe上,并在悬停时更改每个的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/