javascript - jQuery 悬停在堆叠元素上(带有 'tipsy' )

Question

我目前正在使用 tipsy用于显示轻量级工具提示的 jquery 插件。对于非嵌套元素，效果很好。

假设我有:

<span>
    abc
    <span>def</span>
    ghi
</span>

并且我在每个 span 标签上都有一个 hoverevent，当我尝试将鼠标悬停在内部 span 标签上时，我得到了奇怪的结果。我只希望它显示实际悬停的元素。没有别的。

我该怎么做？

Answer 1

Tipsy 被设计为开箱即用的简单插件。虽然有一些可配置的设置，但它们可能无法涵盖所有​​用例。
但是，它确实提供了一个 API ($(el).tipsy(methodName))，这使得它具有一定的可扩展性。
通过使用它的 api，您可以根据自己的规则强制执行某种行为(如 show/hide)。

以下是我编写此解决方法的方式:

$('span')
    // init tipsy
    .tipsy({
        title : function(){
            return $(this).data('tipsy-title');
        }        
    })
   // overwrite the triggering logic
   .on('mousemove', function(e){
       // prevent the event from bubbling up
       e.stopPropagation();

       // force a hide on other targeted elements (suchas the span parent)
       $('span').not(this).tipsy('hide');

       // force a show on this element (such as thespan parent)
       $(this).tipsy('show');
    });​

您可以通过clicking on this fiddle 查看上面的代码。 .

更新
我已经更新了代码以适合您的 html 标记:

var $tips = $('.backref_hover')
       .tipsy()
       .on('mousemove', function(e){
           // prevent the event from bubbling up
           e.stopPropagation();

           // force a hide on other targeted elements (such as the span parent)
           $tips.not(this).trigger('mouseleave');

           // force a show on this element (such as thespan parent)
           $(this).tipsy('show');
        });​

和here是在线演示。

更新#2这是一个适用于动态添加跨度的演示:

$('.backref_hover').tipsy({live:true});

$('body').on('mousemove', '.backref_hover', function(e){
   // prevent the event from bubbling up
   e.stopPropagation();
   e.stopImmediatePropagation();

   // force a hide on other targeted elements (such as the span parent)
   $('.backref_hover').not(this).trigger('mouseleave');

   // force a show on this element (such as thespan parent)
   $(this).tipsy('show');
});

@Lindrian:我在评论中所说的只是(取自 jQuery docs):

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

这个例子说明了如何使用 on 代替 live 来委托(delegate)事件。
也可以在 Action 中看到here .