Jqueryホバーの問題

Question

ホバーメソッドがアタッチされたアイテムが1つあり、ホバーするとその上に別のdivが表示されます...実際に固執する）

$(document).ready(function(){

    $(".cartHover").hover(
      function () {
        $("#uniquename4").fadeIn();
      }, 
      function () {
        $("#uniquename4").fadeOut();
      }
    );
  });

したがって、ホバーで<div class="cartHover">を表示する<div id="uniquename4" class="cartHover">がありますが、fadeInは2回表示されます。助けてください！

Answer 1

つまり、次のようにした方が良いとは思いません：

CSS

<div id="someID" class="cartHover">
  <div id="someId" class="showMe">
  </div>
</div>

<div id="someID" class="cartHover">
  <div id="someId" class="showMe">
  </div>
</div>

jQuery

$(function(){
  $('.cartHover').mouseenter(function(){
    $(this).find('.showMe').show();
  }).mouseleave(function(){
    $(this).find('.showMe').hide();
  });
});

Answer 2

アニメーションキューを積み重ねたくない場合は、そこに.stop（）も含める必要があります。

$(function(){
  $('.cartHover').mouseenter(function(){
    $(this).find('.showMe').stop().show();
  }).mouseleave(function(){
    $(this).find('.showMe').stop().hide();
  });
});

Answer 3

簡単な答え。ここで何をしているのか見てください。クラスcartHoverには2つのdivがあります。したがって、最初のdivにカーソルを合わせると、＃uniquename4が表示されます。 uniquename4が表示されたら、ホバリングすると再びフェードインします。それはすべてセレクターと関係があり、ホバーイベントをクラスcartHoverの要素のすべてのインスタンスにバインドしています-この選択には、デフォルトで表示されるdivと、ホバーに表示される＃uniquename4の両方が含まれます。次のようなものをお勧めします：

<div id="showSomething" class="cart-class">Content</div>
<div id="toBeShown" class="cart-class">Content</div>

$(document).ready(function() {
    $('#showSomething').hover(
         function() {
            $('#toBeShown').fadeIn();
         },
         function() {
             $('#toBeShown').fadeOut();
         }
     );
});