jquery - 如何在页面右侧的 Facebook 新闻提要中的图像旁边立即创建新的 div？

Question

我正在使用 jQuery 1.7.2

我在页面左侧垂直堆叠了缩略图。当用户将鼠标悬停在缩略图上时，我希望该图像的更大版本立即在缩略图右侧的 div 中打开。

我想要的几乎就是 Facebook 是如何通过页面右上角的新闻提要来做到这一点的。

请务必注意，div 必须 float 在页面上的所有其他内容之上。

我试过用类创建 div 并将它们紧跟在缩略图之后，如下所示:

<img src="MyThumb-01.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>
<img src="MyThumb-02.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>
<img src="MyThumb-03.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>

我也尝试过使用带有 id 的 div 并用照片填充它。这不是我想要的。

<img src="MyThumb-01.jpg">
<img src="MyThumb-02.jpg">
<img src="MyThumb-03.jpg">
<div id='TheBigPhotoGoesHere'>

那么，我需要什么样的 div 和什么样的 CSS 才能使一个 div 紧邻另一个悬停的 div？

Answer 1

我会用相对定位将两个图像包装在一个 div 中，并为大图像添加绝对定位:

http://jsfiddle.net/7sZya/

或者使用一些花哨的 CSS 过渡:http://jsfiddle.net/7sZya/3/

<div class="img">
    <!-- image here -->
    <div class="largeimg"></div>
</div>


.img {
    background:grey;
    height:50px;
    position:relative;
    width:50px;
}
.largeimg {
    display:none;
    height:150px;
    width:150px;
    top:0px;
    left:50px;
    position:absolute;
}
.img:hover  {
    cursor:pointer;
}
.img:hover .largeimg {
    display:block;
    background:black;
}