粘滯懸停在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>標籤移動到錨後。