Проблема с наведением Jquery

Question

У меня есть один элемент, к которому прикреплен метод наведения, и при наведении курсора он отображает другой div поверх него...к сожалению, как только отображается верхний div, он повторяет действия (поскольку я добавил тот же класс, чтобы он действительно оставался)

$(document).ready(function(){

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

И вот у меня есть <div class="cartHover"> это отображается при наведении курсора мыши <div id="uniquename4" class="cartHover"> но это приводит к исчезновению дважды.Помогите, пожалуйста!

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. Таким образом, при наведении первого элемента div отображается # uniquename4. Когда отображается uniquename4, при наведении курсора он снова исчезнет. Все это связано с вашим селектором, вы связываете событие hover со всеми экземплярами элементов с помощью класса 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();
         }
     );
});