Question

I have this image:

<img src="..." class="scroller_poster" alt="Some information about movie">

… and I’m trying to display the value in ALT in a DIV elsewhere on my page:

<div class="scroller_movie_data"></div>

… using this function (contained in $(document).ready):

$('.scroller_poster').mouseenter(function() {
    var movie_data = $(this).attr('alt');
    if (movie_data) {
        $('.scroller_movie_data').html(movie_data);
        $(this).mouseleave(function() {
            $('.scroller_movie_data').html('');
        });
    }
});

This works in all browsers except Firefox and I cannot figure out why. Can somebody shed some light on this please?

NOTE:

The image that gets hovered sits inside a jQuery plugin (SmoothDivScroll), which I believe is causing the problem.

Below is a screenshot on what I am working on, it might help understand what I’m doing. Where it says “Madagascar 3: Europe’s Most Wanted (2012)” is where I’m trying to get each hovered ALT value to show.

Answer 1

You probably should’nt rebind the mouseleave function everytime you mouseenter the element, as that will cause the event to be bound multiple times :

$(document).on({
     mouseenter: function() {
         var movie_data = $(this).attr('alt');
         if (movie_data.length) $('.scroller_movie_data').html(movie_data);
     },
     mouseleave: function() {
         $('.scroller_movie_data').html('');
     }
}, '.scroller_poster');

FIDDLE