Mouseover и mouseleave триггер каждый раз, когда я перемещаю мышь внутри данного элемента

Я создаю сайт, где вы наводите курсор мыши на изображение, и он показывает элемент (в этом случае, расширяя его высоту от 0 до 154px).

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

содержимое расширяется, когда мышь входит и сворачивается, когда мышь уходит, но каждый раз, когда мышь перемещается внутри элемент содержимое расширяется и сворачивается несколько раз, пока мышь не покинет элемент.

у меня никогда не было этой проблемы, и я использовал эти функции в прошлое, поэтому я не понимаю, что происходит. Есть идеи?

Edit:

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

Я использую код выше, и все еще получаю тот же вопрос. Я пробовал все варианты .функция остановки (false, false)(false,true)(true,false) (true,true). Проблема возникает по-разному с каждым из них, но она по-прежнему происходит.

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ:

проблема заключалась в том, что содержимое, которое мышь перешла, было покрыто другим содержимым после функция была вызвана. Таким образом, в любой момент мышь одновременно входила и выходила из изображения. Решил проблему, переместив вызов функции в другой элемент.

12
jquery mouseenter mouseleave

5 ответов

попробуйте использовать .события мыши: mouseenter событие вместо .при наведении курсора мыши

Я думаю, что это подойдет!

12

возможно, Вам придется использовать mouseenter вместо mouseover и mouseleave вместо mouseout

или вы можете попробовать и использовать .hover функции как ниже

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    }, function(){ //mouseleave
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});
6

поскольку вы пытаетесь реализовать это в контейнере, ваш правильный обработчик события mouseenter и mouseleave.

пример:

$("#dropdown-menu-create .dropimage").mouseenter(function(){
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200);
});
$("#dropdown-menu-create .dropimage").mouseleave(function(){
    $("#dropdown-menu-create .toggle").animate({height:"0"},200);
});
3

добавление a .stop() перед вашим .animate () поможет исправить это. при остановке предыдущей анимации это предотвращает запуск анимации несколько раз, если пользователь перемещает мышь над элементом много раз быстро

2

хотя это может быть не совсем уместно, у меня была аналогичная проблема. Все, что я буду больше всего перемещать по div, событие будет стрелять. Чтобы решить ее, я понял, что, когда событие "наведения" было вызвано, переключенный div стал тем, над которым моя мышь была закончена. Чтобы исправить это, я просто добавил событие, чтобы оно исчезло в отпуске мыши.

    .profile-about {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 5%;
      left: 0;
      z-index: 2;
      display: none;
    }

.profile-image {
  max-height: 300px;
  max-width: 300px;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75);
} 

    $('.profile-image').hover(function(){
      $(this).next().fadeIn(100);
    });

    $('.profile-about').mouseleave(function(){
      $(this).fadeOut(100);
    });


    <img src="img/somebody.jpg" class="profile-image">
                    <div class="profile-about">
                        <p>
                         Hello I am somebody!
                        </p>
                    </div>
0