JavaScript的 – 提示内部的任何HTML标签会导致基本工具提示关闭悬停

我是jQuery的新手,实际上是AJAX / JavsScript的任何一种(尽管不是PHP,xHTML和CSS的新手).无论如何,我都试图实现“类似于工具提示”的效果,在这里我可以将鼠标悬停在div上……新的div会在其上方淡入,然后当我退出div时,“ tooltip”会淡出.

因此,这是我设法在这里和那里阅读古怪的指南的基本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标记,你滚了它的第二次股利衰退了出去.

任何想法如何解决?

干杯.

解决方法:

更新了评论

只需将事件切换为mouseleave而不是mouseout和mousenter而不是悬停即可解决标记问题,如下所示:

$(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()使用的mouseent不会.因此,当前实际导致您当前问题的原因是…将鼠标移到< img>里面的标签,不会有问题:)

上一篇:显示DevExpress网格单元的工具提示


下一篇:setTooltipText()和android:tooltipText在Nougat中不起作用