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>

Rory McCrossan · Accepted Answer · 2019-02-15T15:51:20.917

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>

@kirantesting I added an alternative solution which does not change the HTML, but still avoids the global variable — Rory McCrossan, Feb 15 '19 at 15:51
First solution didn't work, not sure. Second worked for me. Thanks so much — kiran testing, Feb 15 '19 at 16:38
https://dev05-na01-frette.demandware.net/on/demandware.store/Sites-Frette-Site/en_US/Search-Show?cgid=bedding After changing the color for the product using swatch, then new product is showing the correct image on load(ajax). Once mouse out, then it shows the same image which was there earlier (before swatch selection, before hover) — kiran testing, Feb 15 '19 at 16:51
After color selection, I am replacing the new src attribute in img tag. After I hover on it, it shows the hover img which is correct but it shows the old img src not the replaced one — kiran testing, Feb 15 '19 at 17:14
Most likely because this logic sets the `data-static-src` when the page loads, before you change it. If you update the data attribute when you set the new `src` it will work. I'd suggest starting a new question if you're having issues - but be sure to include the logic which updates the image src — Rory McCrossan, Feb 15 '19 at 17:17

jQuery hover not working when no second image available

1 Answers1