javascript - 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)