粘滞在jQuery中徘徊

Question

我基本上试图创造一点“这是什么？”使用jQuery的工具提示。

假设我有以下标记：

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

我想要以下行为：

1. 用户盘旋跨越
2. 锚被褪色。
3. 用户将鼠标移动到锚点，它仍会显示。
4. 他们点击它（我可以做到这一点！）
5. 用户鼠标远离跨度和锚点，锚点消失。

此刻我可以让锚点出现并在它们悬停在跨度上时消失，但是我怎样才能获得它以便在鼠标移动到锚点时它仍然显示？

这是我的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

有很多方法可以做到这一点，最简单的方法是根据你所展示的内容添加工具提示并从中获取数据。

$('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>标签移到锚之后。