jQuery中的粘性悬停效果

Question

我将尝试使用jQuery创建小型的“What is this?”工具提示。

假设我有以下标记：

```html

我基本上正在尝试使用 jQuery 创建小型的“这是什么？” 工具提示。

假设我有以下标记：

```

Account Type: <span class="what_trig permissions">Administrator</span>
<a class="what permissions">What is this?</a>

我希望实现以下行为：

1. 用户悬停在span上
2. 链接淡入。
3. 用户将鼠标移动到链接上，链接保持显示状态。
4. 他们单击它（我可以做到那一点！）
5. 用户将鼠标移开，包括span和链接在内，链接消失。

目前，当他们悬停在span上时，我可以使链接出现和消失，但是如何使其在他们将鼠标移到链接上时保持显示状态呢？

这是我的jQuery悬停逻辑：

$('.what_trig').hover(function() {
    var classes = $(this).attr('class').split(/\s+/);
    $.each(classes,function(index, item) {
        $('.what').each(function() {
            if ($(this).hasClass(item)) {
                $(this).fadeIn(100);
            }
        });
    });
    },
    function() {
        var classes = $(this).attr('class').split(/\s+/);
        $.each(classes,function(index, item) {
            $('.what').each(function() {
                if ($(this).hasClass(item)) {
                    $(this).fadeOut(100);
                }
            });
        });
    });

- Alex Coplan

Answer 1

如果可以添加额外的span，我会这样做：

（将悬停功能添加到外部span中，以便不触发mouseOut） http://jsfiddle.net/qQTuE/

- ptriek

Answer 2

这实际上非常简单... 我需要做的只是将 </span> 标签移到锚点之后。

- Alex Coplan

Answer 3

有很多种方法可以实现，基于您所展示的情况，最简单的方法是为锚点添加工具提示，并从 span 中获取数据。

$('a.what').hover(function() {   // modified this
    var trig = $(this).prev('what_trig');  // added this
    var classes = trig.attr('class').split(/\s+/);     // modified this
    $.each(classes,function(index, item) {
        $('.what').each(function() {
            if ($(this).hasClass(item)) {
                $(this).fadeIn(100);
            }
        });
    });
    },
    function() {
        var trig = $(this).prev('what_trig');  // added this
        var classes = trig.attr('class').split(/\s+/);     // modified this
        $.each(classes,function(index, item) {
            $('.what').each(function() {
                if ($(this).hasClass(item)) {
                    $(this).fadeOut(100);
                }
            });
        });
    });

- Terry