images disappear when I click back button on mobile screens

Question

I'm having an issue with a hover effect implemented on a website. The effect works fine on desktop. On mobile, the images all appear normally and when I click on the they take me to the correct link. But when I press back on the browser, all I'm seeing is the images alt text. Could someone advise? Here's the code I currently have. I can't seem to find any solutions on here for a similar issue. Thank you

$(document).ready(function () {
$('.img1')
    .mouseover(function () {
    $(this).attr("src", "https://cdn.shopify.com/s/files/1/1297/5789/t/3/assets/Easy_Motion_-_Electric_Bicycles_Two.jpg?6314974642385151026");
})
    .mouseout(function () {
    $(this).attr("src", "https://cdn.shopify.com/s/files/1/1297/5789/t/3/assets/Easy_Motion_-Electric_Bikes.jpg?10135819641956685452");
});

<div class='desktop-4 tablet-full mobile-full'><a href='/home'><img src="https://cdn.shopify.com/s/files/1/1297/5789/t/3/assets/Easy_Motion_-Electric_Bikes.jpg?10135819641956685452" alt="electric bikes by easy motion" class="img1"/></a></div>

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Simply disable it for mobile (mouseenter ecc.. doesn't work)

$(document).ready(function() { 
    if(!isMobile) {
        // your code...
    }
});

Check this question: What is the best way to detect a mobile device in jQuery? for detecting mobile devices or use Modernizr to detect if touch is enabled

edited May 23 '17 at 11:52

Community

1
1

answered Nov 29 '16 at 17:20

maestroosram

153
9

Thanks for your response - I'm inexperienced when it comes to jQuery, what code would I require in this function? – user3578655 Nov 29 '16 at 17:36

images disappear when I click back button on mobile screens

1 Answers1