鼠标输入事件功能在Firefox中不起作用

Question

我有这张图片：

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

...我正试图在我页面上其他地方的DIV中显示ALT中的值：

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

...使用此功能（包含在$（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('');
        });
    }
});

这适用于除Firefox以外的所有浏览器，我无法弄清楚原因。有人可以对此有所了解吗？

注意：

徘徊的图像位于jQuery插件（SmoothDivScroll）内，我相信这会导致问题。

以下是我正在处理的内容的屏幕截图，它可能有助于了解我正在做的事情。它说“马达加斯加3：欧洲最受欢迎（2012）”是我试图让每个徘徊在ALT值的地方。

Answer 1

每次鼠标输入元素时，你可能都不应该重新绑定mouseleave函数，因为这会导致事件被多次绑定：

$(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

Answer 2

为什么在mouseenter事件中有mouseleave事件？这是非常糟糕的做法，可以创建多个事件处理程序。

在jquery中使用悬停方法（第一个函数是mouseenter，第二个函数是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('');
});