粘性悬浮在jQuery中

Question

我基本上是在创造一个小小的“这是什么？”使用jQuery的工具提示。

假设我有以下标记：

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

我希望有以下行为：

1. 用户悬停在span
2. (锚已褪色)上。
3. 用户移动到那里，鼠标移动到锚上，它仍然显示。
4. 他们点击它(我可以做那个比特！)

H 110用户鼠标从跨度和锚以及锚消失。H 211G 212

现在，我可以让锚出现和消失时，他们悬停在跨度，但我如何得到它，因此，它仍然显示，当他们移动鼠标到锚？

下面是我的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);
                }
            });
        });
    });

Answer 1

如果选择增加一个额外的跨度，我会这样做：

http://jsfiddle.net/qQTuE/

(将悬停函数添加到外部空间，这样就不会触发mouseOut )

Answer 2

做这件事的方法很多，根据你所展示的，最简单的方法就是为锚添加工具提示，并从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);
                }
            });
        });
    });

Answer 3

这其实太简单了..。我所要做的就是把</span>标签移到锚后面。