Question

当您将鼠标悬停在某个图像上时，我会显示一个div：

    $('#link-test-img').mouseenter(function() {
      $('#popup-test').css('display','block');
    });
    $('#link-test-img').mouseleave(function() {
      $('#popup-test').css('display','none');
    });

当鼠标离开图像时，只会调用mouseleave使div不可见，而不是当它在它上面移动时？

感谢。

Answer 1

如果弹出窗口显示在鼠标下方，则会为mouseleave调用img函数。确保您的弹出窗口未在鼠标下直接显示。

修改

$('#link-test-img').mouseenter(function() { $('#popup-test').css('display','block'); }); $('#popup-test').mouseleave(function() { $('#popup-test').css('display','none'); });

Aka，在您输入图像时显示，但在弹出窗口时消失。

Answer 2

John Gietzen给出了很好的建议。让我详细说明一下。如果＃popup-test div显示在鼠标下，则会针对＃link-test-img触发mouseleave事件。

现在，如果你的#popup-test div本身是一个图像，并且意味着要替换被鼠标悬停的图像，你可以使用IMG元素的一个很少使用的CSS属性background-image。在这种情况下，您创建一个透明的PNG（即，一个透明度为0的透明胶片，以便通过它显示所有内容）到第一个图像的尺寸，然后分配PNG的背景图像样式，我们将在这里调用clear.png并将“clear01”的ID提供给＃link-test-img的源URL。

在CSS中，您可以设置样式规则

background-image: url(http://your.link-test-img.url);

在Javascript中，您可以这样设置：

document.getElementById("clear01").style.backgroundImage = "url(http://your.link-test-img.url)";

在JQuery中你会说：

$('#clear01').mouseenter(function() {
  $('#link-test-img').css('background-image','url(http://your.link-test-img.url)');
});
$('#clear01').mouseleave(function() {
  $('#link-test-img').css('background-image','url(http://your.popup-test-img.url)');
});

你不需要经历大量的旋转和所有这些事件的未来。但是，正如我上面提到的，这只适用于弹出测试div仅用于显示不同的图像。如果它显示不同的内容，并且在鼠标下方弹出，请不要将mouseleave函数事件处理程序分配给第一个图像。而是将它分配给popup-test div，使用与上面相同的代码，如下所示：

$('#link-test-img').mouseenter(function() {
  $('#popup-test').css('display','block');
});
$('#popup-test').mouseleave(function() {
  $('#popup-test').css('display','none');
});

如果div没有弹出鼠标，即它会显示在页面的其他位置，并且您希望原始链接测试img保持在视图中，并且这不会发生，您还有其他问题。在这种情况下，如果您可以提供更多代码或指向该页面，您可以获得更详细的帮助。

希望这有帮助。

移动触发图像时jQuery div闪烁

2 个答案: