Pappricot Pappricot - 1 year ago 59
HTML Question

mouseenter function only works vertically

I'm trying to replace one image (closed bag) to another (open bag) using

functions. For some reason it only works when I leave the mouse vertically, but not horizontally. I suspect it has to do with the length of the image but I inspected it and it was not the issue. Here is my code:

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

<script src=""></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 " />

Thank you in advance for the help!

Answer Source

The problem is you're setting your two different images to have a different height and width. Your front image is at 40% and your second is at 30%. So when you try to hover outside of your smaller image, it triggers the hover onto the larger image, and then hides your image over again, causing the glitch.

Your code (40% 30% broken)

A better solution for this would be to give both your images the same class and toggle the images. This will fix the hover issue you are having with the different sized images, and it is more efficient.


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


My code (40% 30% fixed)