Функция mouseenter работает только по вертикали

Question

Я пытаюсь заменить одно изображение (закрытый мешок) на другой (открытый мешок) с помощью mouseenter и mouseleave функций. По какой-то причине он работает только тогда, когда я оставляю мышь вертикально, но не горизонтально. Я подозреваю, что это связано с длиной изображения, но я его осмотрел, и это не проблема. Вот мой код:

$("#tumi_front").mouseenter(function() { 
 
    $("#tumi_front").hide(); 
 
    $("#tumi_open").show(); 
 
}); 
 
$("#tumi_open").mouseleave(function() { 
 
    // alert('leave'); 
 
    $("#tumi_front").show(); 
 
    $("#tumi_open").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" /> 
 
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />

Заранее спасибо за помощь!

Answer 1

Проблема заключается в том, что вы устанавливаете два разных изображения с разной высотой и шириной. Ваше изображение спереди - 40%, а ваше второе - 30%. Поэтому, когда вы пытаетесь нависнуть за пределами своего меньшего изображения, он запускает наведение на большее изображение, а затем снова скрывает ваше изображение, вызывая сбой.

Your code (40% 30% broken)

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

JQuery

$(".double-img").on("mouseenter mouseleave", function() { 
    $(".double-img").toggle(); 
}); 

JSFiddle

My code (40% 30% fixed)

Answer 2

Почему бы не использовать 1 изображение (изображение спрайта) и сделать background-position с CSS на :hover. Не требуется jquery!