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即使在进入孩子时也会触发，mouseenter使用的.hover()不会。那么目前实际导致当前问题的是什么......将鼠标移动到里面的<img>标签上，不会有问题：）

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

1 个答案:

更新了评论

上一个答案