ShadowStorm
ShadowStorm

Reputation: 851

mouse-enter event function not working in Firefox

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.

enter image description here

Upvotes: 0

Views: 1845

Answers (2)

adeneo
adeneo

Reputation: 318172

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

Upvotes: 1

user1796666
user1796666

Reputation:

Why do you have the mouseleave event inside the mouseenter event? It's very bad practice and can create multiple event handlers.

Use the hover method in jquery(first function is mouseenter, second function is mouseout):

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

Upvotes: 1

Related Questions