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

DEMO

需要显示隐藏的div，并在用户将鼠标悬停在其上时保持不变

3 个答案: