工具提示中的任何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中的那个hid标签中,那么第二个你翻过它就会消除掉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()执行on mouseenter和mouseleave(你分别提供的第一个和第二个函数),所以它fadeIn()已经调用了已经重叠的位.

该mouseout然而,火灾进入,即使一个孩子,mouseenter其.hover()使用也不会.那么目前实际导致你当前问题的是什么......将鼠标移动到<img>里面的标签上,不会有问题:)