مسج تحوم مشكلة

Question

ولدي عنصر واحد له طريقة تحوم المرتبطة به، وعندما كنت تحوم فإنه يعرض آخر div على أعلى من ذلك ... للأسف مرة واحدة يعرض ال div العليا أنه redoes الإجراءات (منذ أن كنت وأضاف نفس الفئة لذلك التمسك فعلا حول)

$(document).ready(function(){

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

وذلك لدي <div class="cartHover"> أن على تحوم يعرض <div id="uniquename4" class="cartHover"> ولكنه يفعل fadeIn مرتين. مساعدة من فضلك!

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>

ومسج

$(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

والجواب بسيط. انظروا الى ما تفعلونه هنا. كنت قد حصلت على اثنين من عناصر div مع الطبقة، cartHover. لذلك، تحوم شعبة الأول، يسبب # uniquename4 لعرضه. مرة واحدة يتم عرض uniquename4، إذا كنت تحوم عليه، TS الذهاب الى تتلاشى نفسها مرة أخرى. كل شيء له علاقة محدد الخاص بك، وأنت ملزم الحدث تحوم على كافة مثيلات العناصر مع cartHover الطبقة - ويشمل هذا اختيار كل من شعبة وهو افتراضيا مرئية، و# 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();
         }
     );
});