jquery - 非表示のdivを表示し、ユーザーがその上にカーソルを合わせてもそのままにしておく必要があります

Question

このページと同じ効果を再現しようとしていますhttp://www.zendesk.com/company/management-team

私は以下のコードを使用しています

 $("#theLink").hover(
    function () {
        $("#theDiv").fadeIn();
    },
    function () {
        $("#theDiv").fadeOut();
    }
);

これは私が探していたものの半分です。http：//jsfiddle.net/np87e/で機能していることがわかります。

そのように機能させる方法に頭を悩ませているようには思えません。zendeskと同じように機能するようにするにはどうすればよいですか？

Answer 1

http://jsfiddle.net/np87e/405/

<a>タグ内にdivを配置するだけです。

<a id="theLink">hover here
<div id="theDiv">this is the div</div>
</a>

Answer 2

あなたは純粋なCSSで何かをすることができます：

#theDiv {
    display: none;
}
#theLink:hover + #theDiv, #theDiv:hover {
    display: inherit;
}

ただし、これは、@ superUntitledの回答（疑似ポップアップは子である必要があります）と同様に、DOM内の要素の特定の配置（つまり、兄弟として）に依存します。

移行先の要素の横に疑似ポップアップを（ユーザーに）表示する必要はありませんが、次のようにして、DOM内の要素の位置を解くことができます。

#theDiv {
    display: none;
}
#theDiv.hovering, #theDiv:hover {
    display: inherit;
}
// ... wherever your script lives
$('#theLink').hover(function(){
 $('#theDiv').addClass('hovering');
},function(){
 $('#theDiv').removeClass('hovering');
});

Answer 3

独自のプラグインを作成するのはどうですか？

(function ($) {
    $.fn.tooltip = function (options) {
        var settings = options;
        return this.each(function () {
            $(this).hover(

            function () {
                $(settings.div).stop().fadeIn();
            },

            function () {
                $(settings.div).stop().fadeOut();
            });
        });
    };
})(jQuery);

//USAGE
$("#theLink").tooltip({
    div: "#theDiv"
});

デモ