How to get JQuery image hover function to return to default image

Question

I've made a jsfiddle that will hopefully be quite self explanatory.

I have managed to get the smaller images to replace the larger image on hover, however I am now trying to get the image to return to it's original state (default) when the mouse leaves either of the thumbs.

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

Can anyone tell me the best way to do this?

Thanks

Answer 1

The code you were using is switching the image source, so when your mouse cursor left the smaller thumbnails the source of your main image had been changed and had no default to return to.

By using the 'mouseleave' function I've added the source of your default image which achieves the effect you wanted.

So 'mouseenter' replaces the image source, 'mouseleave' returns it back.

Take a look: 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>

Answer 2

try this one

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

check it out