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！

mouseenter功能只能垂直工作

2 个答案: