工具提示内的任何 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');
    });

});

问题是，如果我将“任何”html 标记放在悬停在其中的 div 中，那么当您将其翻滚时，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即使进入孩子也会触发，.hover() 使用的mouseenter 不会触发。那么目前实际上是什么导致了您当前的问题...将鼠标移到内部的 <img> 标签上，不会有问题:)