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 イベントがあるのはなぜですか? これは非常に悪い習慣であり、複数のイベント ハンドラーを作成できます。

jquery で hover メソッドを使用します (最初の関数は mouseenter、2 番目の関数は 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 に答える
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 に答える