Question

我尝试做的是显示一个较大的图像和一些其他较小的图像，下面应该在悬停时显示在较大的图像div中。

我得到了这么远，但是当没有缩略图悬停时，如何让更大的div显示其默认内容？

HTML结构：

<div class="preview">
    <img src="...">
</div
<div class="thumbs">
    <img src="..." class="zoom" rel="...">
    <img src="..." class="zoom" rel="...">
</div>

jQuery的：

$(function(){
  $("img.zoom").mouseover(
    function(){
      $(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
    }
  );
});

（SEE FIDDLE）

Answer 1

您可以使用mouseout事件。

$("img.zoom").mouseout(
    function(){
      $(".preview").html( $("<img>").attr("src", "http://placehold.it/400x220") );
    }
  );

小提琴：http://jsfiddle.net/j5g2u/3/

希望它有所帮助。

Answer 2

您可以单独定义某个函数以用作mouseover：

的处理程序

var view = function(e){
  $(".preview").html( $("<img>").attr("src", $(e.target).attr("rel")) );
};

$("img.zoom").mouseover(view);
//call it initially, suppose the first img.zoom is the default
view({target: $("img.zoom")[0]});

在某个div中悬停时显示更大的图像

2 个答案:

Demo.