如何让 JQuery 图像悬停功能返回默认图像答案

【问题标题】：How to get JQuery image hover function to return to default image如何让 JQuery 图像悬停功能返回默认图像
【发布时间】：2013-06-07 09:07:43
【问题描述】：

我制作了一个 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'));
});

谁能告诉我最好的方法？

谢谢

【问题讨论】：

标签： jquery image click hover mouseleave

【解决方案1】：

试试这个

   <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/

检查一下

【讨论】：

【解决方案2】：

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

通过使用“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>

【讨论】：