0

我有这张图片：

<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 值显示的地方。

在此处输入图像描述

4

2 回答 2

1

您可能不应该在每次 mouseenter 元素时重新绑定 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');

小提琴

于 2012-11-03T23:20:04.837 回答
1

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

在jquery中使用hover方法（第一个函数是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('');
});
于 2012-11-03T23:22:13.137 回答