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/

您可以将 div 放在<a>标签内：

<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;
}

但是，这依赖于元素在 DOM 中的特定定位（即，作为兄弟姐妹），类似于@superUntitled 的答案（伪弹出窗口必须是子级）。

虽然它不会让您不必让伪弹出窗口出现在您想要转换的元素旁边（对用户），但您可以执行以下操作来解开元素在 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"
});

演示