Clever Geek Handbook

JQuery hover function

I am creating a hover effect using jQuery and the data attribute.

So what I did was that I put some data attribute on each image, and then I access them through jQuery and store them in a variable. Then I access them to change the image via jQuery. However, I have no idea how to get it back to original on "mouseout"

Here's my jQuery:

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        $(this).attr('src');
    });
});

Any idea?

+3


source to share


5 answers


To store the current src as a variable and use it

   var old="";
$(document).ready(function(){
        $('img').hover(function(){
            old=$(this).attr('src');
            var s = $(this).attr('data-alt-src');
            $(this).attr('src', s);
        }, function(){
            $(this).attr('src',old);
        });
    });


Updated Fiddle

+1


source


try setting original src to a different attribute and use that when mouseleave.

 $(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');            
        $(this).attr('orSrc',$(this).attr('src')).attr('src', s);
    }, function(){
        $(this).attr('src',$(this).attr('orSrc'));
    });
});


Demo

+3


source 


    $(document).ready(function() {
      var src_original;
      $('img').hover(function() {
        src_original = $(this).attr('src');
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
      }, function() {
        $(this).attr('src', src_original);
      });
    });
      

        
        
        
      

    
img {
  cursor: pointer;
}
img:hover {
  opacity: 0.7;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://goo.gl/osWLNm" data-alt-src='http://goo.gl/K5yFHa' />
  <img src="http://goo.gl/umj4bX" data-alt-src='http://goo.gl/bz4jQH' />
  <img src="http://goo.gl/W1fumF" data-alt-src='http://goo.gl/d4gynn' />
  <img src="http://goo.gl/wMb04Z" data-alt-src='http://goo.gl/LqZU0Q' />

</section>
Run codeHide result


+1


source


Store the original image src

in the cache with .data()

.

$(document).ready(function () {
    $('img').hover(function () {
        var that = $(this);
        that.data('or-src', that.prop('src'))
        that.prop('src', that.data('alt-src'));
    }, function () {
        var that = $(this);
        $(this).prop('src', that.data('or-src'));
    });
});

DEMO

0


source


I added data-old-src to store the original img source and load on mouse output.

Check out https://jsfiddle.net/jzxh1asx/6/

Html

  <section>
    <img src="http://goo.gl/osWLNm" data-old-src="http://goo.gl/osWLNm" data-alt-src='http://goo.gl/K5yFHa' />
    <img src="http://goo.gl/umj4bX" data-old-src="http://goo.gl/umj4bX" data-alt-src='http://goo.gl/bz4jQH' />
    <img src="http://goo.gl/W1fumF" data-old-src="http://goo.gl/W1fumF" data-alt-src='http://goo.gl/d4gynn' />
    <img src="http://goo.gl/wMb04Z" data-old-src="http://goo.gl/wMb04Z" data-alt-src='http://goo.gl/LqZU0Q' />
  </section>

Js

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        var os = $(this).attr('data-old-src');
        $(this).attr('src', os);
    });
});
0


source






More articles:


All Articles