javascript - 工具提示内的任何 HTML 标记都会导致基本工具提示在悬停时关闭

Question

我是 jQuery 的新手，实际上是任何一种 AJAX/JavsScript 的新手(尽管对 PHP、xHTML 和 CSS 并不陌生)。无论如何，我正在尝试实现“类似工具提示”的效果，我可以将鼠标悬停在一个 div 上...新的 div 在其上方淡入，然后当我退出该 div 时，“工具提示”淡出。

所以这是我设法拼凑起来的基本 jQuery，在这里和那里阅读奇怪的指南:

$(function()
{
    $('#sn-not-logged-in').hover(function()
    {
        $('#sn-not-logged-in-hover').fadeIn('medium');
    });

    $('#sn-not-logged-in-hover').mouseout(function()
    {
        $('#sn-not-logged-in-hover').fadeOut('medium');
    });

});

问题是，如果我在悬停的 div 中放置“任何”html 标签，当您将其滑过它时，div 会淡出。

知道如何解决这个问题吗？

干杯。

Answer 1

更新评论

只需将您的事件切换到 mouseleave而不是 mouseout和 mousenter而不是 hover将解决您的标记的问题，如下所示:

$(function() {
  $('#sn-not-logged-in').mouseenter(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  });
  $('#sn-not-logged-in-hover').mouseleave(function() {
    $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

---

上一个答案

更改您的 .hover() 向上一点，像这样:

$(function() {
  $('#sn-not-logged-in').hover(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  }, function() {
     $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

.hover() 在 mouseenter 上执行和 mouseleave (分别是您提供的第一个和第二个函数)，因此它调用了 fadeIn()已经有点重叠了。

mouseout然而，即使进入 child 也会触发，mouseenter哪个.hover()使用不会。那么目前实际导致您当前问题的原因是什么...将鼠标移到 <img> 上标签在里面，不会有问题:)