jQuery hover not working when no second image available

Question

So I've blocks of image container, once I hover on any 1 container then hover is working. But when the hover image is not available, then the image flickering is happening. Below is my code:

if ($('.clp-hover-img[data-src!="null"]')) {
    var tempSrc = '';
    $(".clp-hover-img").hover(function () {
        tempSrc = $(this).attr('src');
        $(this).attr("src", $(this).data("src"));
    }, function () {
        $(this).attr("src", tempSrc);
    });
}

img {
    width: 200px;
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg"
        src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg">
</div>

<div class="two">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="null" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg">
</div>

<div class="three">
    <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet"
        itemprop="image" data-src="null" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg">
</div>

Answer 1

The issue is because your if statement is looking at a jQuery object and hence always returns true . Therefore the event is applied to all elements.

You can fix the problem and improve the logic by removing the if condition and using the attribute selector to only select the elements which have a data attribute with a valid value. Also note that global variables should be avoided, which you can achieve in this case by having another data attribute to hold the src to use for the image when the mouseleave event happens. Try this:

 $('.clp-hover-img[data-hover-src!="null"]').hover(function() { $(this).attr('src', function() { return $(this).data('hover-src') }) }, function() { $(this).attr('src', function() { return $(this).data('src') }) }); 

 img { width: 200px; height: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="one"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" data-src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg" src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg"> </div> <div class="two"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="null" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg"> </div> <div class="three"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-hover-src="null" data-src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg"> </div> 

If you are unable to amend the HTML, then you could still use a dynamically created data attribute, like this:

 var $imgs = $('.clp-hover-img[data-src!="null"]').each(function() { $(this).data('static-src', $(this).prop('src')); }); $imgs.hover(function() { $(this).attr('src', function() { return $(this).data('src') }) }, function() { $(this).attr('src', function() { return $(this).data('static-src') }) }); 

 img { width: 200px; height: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="one"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg" src="https://images.pexels.com/photos/735621/pexels-photo-735621.jpeg"> </div> <div class="two"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="null" src="https://images.pexels.com/photos/1640769/pexels-photo-1640769.jpeg"> </div> <div class="three"> <img class="tile-image clp-hover-img" alt="Cotton Sateen Bottom Sheet" title="Cotton Sateen Bottom Sheet" itemprop="image" data-src="null" src="https://images.pexels.com/photos/1890420/pexels-photo-1890420.jpeg"> </div>