mouseenter関数は垂直方向にのみ動作します

Question

mouseenterとmouseleave関数を使用して、1つの画像（閉じたバッグ）を別の（開いたバッグ）に置き換えようとしています。なんらかの理由で、マウスを垂直にしたままで、水平にしないと機能しません。私はイメージの長さと関係があると思うが、私はそれを検査したが問題ではなかった。ここに私のコードは次のとおりです。

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

問題は、2つの異なる画像を異なる高さと幅に設定することです。あなたの正面の画像は40%で、もう1つは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枚の画像（画像スプライト）を使用し、:hoverのCSSとbackground-positionをしません。 jqueryは必要ありません！