Липкое зависание в 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 isn 'т срабатывает)

Answer 2

Это на самом деле просто смешно ... все, что мне нужно было сделать, это переместить тег </span> после якоря.

Answer 3

Множество способов сделать это, самым простым на основе того, что вы показали, было бы добавить всплывающую подсказку для якоря и получить данные из диапазона.

$('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);
                }
            });
        });
    });