jquery - 如果光标在打开的元素内，则保持元素打开

Question

如果光标移动到元素，我试图保持切换元素可见。

我的代码现在是：

<div class="infobox">
    <i class="icon-info-sign"></i>
    <div class="infobox_content" style="display: none;">
        Content
    </div>
</div>

有了这个 JavaScript/jQuery

$("div.infobox i.icon-info-sign").hover(
    function () {
        $(this).parent().find(".infobox_content").stop(true).show("slow");
    },
    function (e) {
        $(this).parent().find(".infobox_content").stop(true).hide("slow");
    }
);

如何检测光标是否已移动到.infobox_content? 如果是这样，我需要让元素保持打开状态，并且只在它的外面隐藏它一次.infobox_content。

Answer 1

将悬停更改为其中infobox的图标而不是其中的图标应该可以简化 UI。

$("div.infobox").hover(
    function () {
        $(this).find(".infobox_content").stop(true).show("slow");
    },
    function (e) {
        $(this).find(".infobox_content").stop(true).hide("slow");
    }
);

如果您有infobox比显示更多的元素，并且由于其他元素而无法正常工作，请将图标和内容包装在另一个 div 中，以便它们共享一个共同的父级并将悬停绑定到该共同的父级