移动触发图像时jQuery div闪烁答案

【问题标题】：jQuery div flickering when moving over trigger image移动触发图像时jQuery div闪烁
【发布时间】：2010-02-12 16:03:57
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

编辑：

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

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

阿卡，让它在你进入图像时显示，但在你离开弹出窗口时消失。

【讨论】：

谢谢你是正确的。然而它并不能解决问题。我需要 div 在图像占据的区域上方时仍然出现。
在那里，我添加了一个应该有效的编辑。当然，我看不到你的 HTML 布局或类似的东西，所以我不能保证。

【解决方案2】：

John Gietzen 给出了很好的建议。让我详细说明一下。如果您的#popup-test div 出现在鼠标下方，则将为#link-test-img 触发 mouseleave 事件。

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

在 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)');
});

在所有这些事件触发时，您不必经历很多回旋和笨拙。但是，正如我上面提到的，这仅在您的 popup-test 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 保持在视图中，而这没有发生，您还有其他问题.在这种情况下，如果您可以提供更多代码或指向该页面，您可以获得更详细的帮助。

希望这会有所帮助。

【讨论】：