Question

我有鼠标悬停链接时出现的工具提示。如果你将鼠标悬停在它上面，我希望工具提示保持不变（因为它中有链接等），或者如果你离开链接就会消失。我尝试了几件事，但还没弄明白。这是我第一次使用jQuery构建任何严肃的东西。

以下内容是.hover（）'handlerOut'事件中的内容。

if($(this.a).mouseout())
{
    if ($('.tip_container').hover()) {
        $('.tip_container').css('display', 'block');
        $('.tip_container').mouseleave(function() {
        $('.tip_container').remove(0);
    });
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
    {
        $('.tip_container').remove(0);
    }
}
>>"this.a" refers to the link<<

有了这个和我试过的其他东西，工具提示不会消失，除非你将鼠标悬停在它上面。我也试过

else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {

是否可能有多种条件？

该代码的主要思想是，如果您将鼠标移离“this.a”链接，工具提示将被删除：

$('.tip_container').remove(0);

但如果您将鼠标悬停在工具提示上，则在将鼠标从工具提示中移除之前不会将其删除。

Answer 1

你有小提琴或任何要演示的东西吗？

也许像

$(this, '.tip_container').hover(function () {
        $('.tip_container').show();
  }, function () {
        $('.tip_container').hide();
  }
);

基本上将链接和工具提示元素绑定到悬停方法，该方法隐藏/显示mouseenter / mouseleave上的tooltip元素。 Pointy在评论中发布的链接是一个很好的起点

Answer 2

经过一夜好眠并暂时忽略它后，我想出了一个解决方案。这就是我在悬停handlerOut事件中添加的内容。

 var timer;

 timer = setTimeout(function() {
           $('.tip_container').remove();
       }, 500);                     
           $( '.tip_container' ).hover(
       function() {
           clearTimeout(timer);
           $('.tip_container').css('display', 'block');
       }, function() {
           $('.tip_container').remove();
       }
    );

在悬停链接之前，它将在执行删除之前等待，如果鼠标悬停在工具提示上，它将清除计时器并将工具提示设置为阻止以显示然后将其悬停在工具提示之外它将被删除。

Jquery if else语句为工具提示

2 个答案: