如何在页面右侧的Facebook新闻提要上一样，在图像旁边立即创建新的div？

Question

我使用jQuery 1.7.2

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

我想要的几乎就是Facebook在页面右上方的新闻推送的做法。

重要的是要注意div必须浮动在页面上的其他所有内容之上。

我试着用一个类创建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'>

我也尝试使用一个div与id和照片填充它。这不是我想要的。

<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;
}

Answer 2

jQuery UI Position插件可以用来做你想做的事情。

如果你不希望该元素随页面滚动，将其附加到body并使其CSS位置:

position: fixed;

Answer 3

您需要在所有内容(父元素是body)之外创建一个绝对定位的div。当您将鼠标悬停在img上时，div内容将被填充，并且它的位置将放在与悬停的img相邻的位置。

Answer 4

如果您不想使用库，我在这里创建了一个基本示例http://jsfiddle.net/Em2UJ/2/

    $('.hover').hide();
  $("img").hover(function(e)
   {
    var height = $(this).height();
    $('.hover').css("margin-top",-height);
    $('.hover').fadeIn();       
  });

Answer 5

1. 绝对地位。
2. 使用一些数学与jquery使其位置正确。
3. 使用css类/id来引用每个元素

见http://jsfiddle.net/6ENHe/2/html:

<img id="pop1" class="pop" src="http://26.media.tumblr.com/tumblr_lmw73jhwOB1qlyrujo1_500.jpg" />
 <!-- ^ big hidden img, below, thumb -->
<img data-pop="#pop1" class="thumb" src="http://26.media.tumblr.com/tumblr_lmw73jhwOB1qlyrujo1_500.jpg" height="100" width="100" />

js:

$(function(){
$('img.thumb').hover(function(){
    var self = $(this),
        popimg = $(self.data('pop')),
        offset = self.offset();
    popimg.css({'left': offset.left + $(this).width() + 'px', 'top': offset.top- (self.height() / 2)}); 
    popimg.fadeIn('fast');
}, function(){
    // Can add delay here if necessary
    $($(this).data('pop')).fadeOut('fast');
});
});

css:

.pop { position:absolute; display:none; }