0

我制作了一个 jsfiddle，希望它能够自我解释。

我已经设法让较小的图像在悬停时替换较大的图像，但是我现在正试图让图像在鼠标离开任一拇指时恢复到其原始状态（默认）。

jsfiddle

$('.small a img').on('click hover',function(){
$('.large img').attr('src',$(this).attr('src'));
});
$('small a img').on('mouseleave',function(){
$('.large img').attr('src',$(this).attr('.large img'));
});

谁能告诉我最好的方法来做到这一点？

谢谢

4

2 回答 2

4

试试这个

   <div class="large">
       <a href=""><img src1="http://placehold.it/300x300/" src="http://placehold.it/300x300/"        /></a>
   </div>

   <div class="small">
       <a href="#"><img src="http://placehold.it/300x300/000fff" /></a>
       <a href="#"><img src="http://placehold.it/300x300/fff000" /></a>
   </div>
   <script type="text/javascript">
   $(".small a img").mouseenter(function(){
        $('.large img').attr('src',$(this).attr('src'));
  }).mouseleave(function(){
        $('.large img').attr('src',$('.large img').attr('src1'));
  });
  </script>
      <style>
    .large img
    {
        width: 300px;
    }
    .small
    {
        clear: both;
    }
    .small img
    {
        width: 150px;
        float: left;
    }
</style>

http://jsfiddle.net/Xm2Be/653/

一探究竟

于 2013-06-07T09:28:28.400 回答
1

您使用的代码正在切换图像源，因此当您的鼠标光标离开较小的缩略图时，主图像的源已更改并且没有默认返回。

通过使用“mouseleave”功能，我添加了默认图像的来源，可以达到你想要的效果。

所以'mouseenter'替换了图像源，'mouseleave'返回它。

看看：http: //jsfiddle.net/WolfHook/Xm2Be/672/

<script>
$('.small img').mouseenter(function(){
    $('.large img').attr('src',$(this).attr('src'));
}).mouseleave(function(){
    $('.large img').attr('src','http://placehold.it/300x300/');
});
</script>
于 2013-06-07T13:27:11.733 回答