On mouseover image gets stuck?

Question

On this page http://www.londonsitedesign.co.uk/home.html as you hover over the list pop up images appear. I have noticed that the images sometimes get stuck, especially if I click on one of the links and then return to that page agin the image remains visible. And then when you hover over the same link for that pop up image it does the reverse, it disappears onmouse over rather than appears?

$("#main").on("mouseover mouseout", "h4", function () {
$("#" + $(this).data("img")).toggle();
});

Any idea how to prevent this?

Answer 1

Instead of using toggle(), I'd setup separate handlers for mouseover and mouseout, like this:

$("#main").on('mouseover', 'h4', function () {
    $("#" + $(this).data("img")).show();
}).on('mouseout', 'h4', function () {
    $("#" + $(this).data("img")).hide();
});

Browsers are sometimes unpredictable around the state of the page when you hit Back to return to a page in your history. I'm not sure if there's a way to fix that - but at least this way, you won't be stuck with a reversed toggle.

---

Updated

Take a look at these questions for some ideas on how to prevent the image still being displayed when the back button is pressed:

• jQuery page transition and browser history
• Is there a cross-browser onload event when clicking the back button?

It sounds like all you have to do is add an unload event handler to your page to prevent the last page state from being cached. The handler doesn't even have to do anything - just having it defined is enough. Something like this:

$(window).bind("unload", function() {});