0

それぞれに画像を含む複数のDIVがあります。これらのDIVをロールオーバーするとき、別のDIVを上からフェードインさせたいです。この新しいDIVをロールオフすると、再びフェードアウトするはずです。基本的に、ここにサムネイルのグリッドのようなものが必要ですhttp://www.visualboxsite.com/

これは私が書いたコードです：

<script>
  $(document).ready(function(){

    $("div.projectImage").mouseenter(function () {
      $("div.textRollover").fadeIn(100);
    });

    $("div.textRollover").mouseleave(function () {
      $("div.textRollover").fadeOut(100);
    });

  }); 
</script>

これに関する問題は次のとおりです。

  • DIVの1つにカーソルを合わせると、マウスを置いたものだけでなく、すべての新しいDIVが表示されます。
  • マウスをDIVの上と外に繰り返し動かすと、フェードイン/フェードアウト機能が「スタック」されます。

誰かがこれらを修正するのを手伝ってもらえますか？

4

1 に答える 1

2

そのクラス名でdivを呼び出すよりも具体的にする必要があります。そうしないと、（発見したように）一致しすぎてしまいます。次のコードでは、そのクラス名を持つ子要素のみを照合します。

$(".rollMe").hover(
  function(){
    /* 'this' is whichever div.rollMe you are currently
       hovering over at this particular moment */
    $(this).find("div.iFade").fadeIn(100);
  },
  function(){
    $(this).find("div.iFade").fadeOut(100);
  }
);

<div class="rollMe">
  <div class="iFade">

  </div>
</div>
于 2009-06-23T22:57:32.823 に答える