JQuery Hover Problem

Question

Ich habe ein Element, das eine Hover-Methode muss es angebracht ist, und wenn Sie schweben sie zeigt ein anderes div oben drauf ... leider einmal die oberen div zeigt es die Aktionen nachvollzieht (da ich die gleiche Klasse hinzugefügt eigentlich dableiben)

$(document).ready(function(){

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

Und so habe ich eine <div class="cartHover">, die Displays auf schweben <div id="uniquename4" class="cartHover"> aber es macht den fadeIn zweimal. Hilfe bitte!

Answer 1

So wäre es nicht besser, zu haben:

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

Wenn Sie nicht die Animation Cue auf Sie stapeln möchten, erhalten Sie eine .stop umfassen müssen () in dort auch:

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

Answer 3

Einfache Antwort. Schauen Sie, was Sie hier machen. Sie haben zwei divs mit der Klasse bekommen, cartHover. So schwebt das erste div verursacht # uniquename4 angezeigt werden soll. Sobald uniquename4 angezeigt wird, wenn Sie es schweben, ts es geht selbst wieder verblassen. Das alles hat mit Ihrem Wähler zu tun, Sie Bindung des Hover-Ereignis für alle Instanzen von Elementen mit der Klasse cartHover - diese Auswahl umfasst sowohl die div, die standardmäßig sichtbar und # uniquename4 ist, die auf schweben gezeigt. Ich würde vorschlagen, so etwas wie:

<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();
         }
     );
});