粘滞悬停在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

很多方法来做到这一点，最简单的基础上你已经显示将添加工具提示锚和gr ab从跨度数据。

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