如何制作悬停时出现的 div，悬停在 jquery 或 css 时停留

Question

我有一个 div 叫做标题，还有一个叫做描述。 我设法在将鼠标悬停在标题上时使 div 描述出现。 这里是 the fiddle

现在我想让 div 描述在我悬停在它上面时保持可见（在描述 DIV 上）。 一旦我从 div 描述中删除悬停，它应该隐藏。

这是我的html

<span class="title">Last</span>

<div class="description">some description</div>

这是我的 JS

var cancel = false;
$("div.description").hide();

$(".title").hover(function () {
    cancel = (cancel) ? false : true;

    if (!cancel) {
        $("div.description").hide();
    } else if (cancel) {
        $("div.description").show();
    }
});

这是 CSS

.title { background: red; }
.description { background: yellow; }

Answer 1

您可能不需要 jQuery 来执行此操作。

鉴于您提供的标记，只需使用普通 CSS 并利用 adjacent sibling combinator, +:

Example Here

.description {
    display: none;
}
.title:hover + .description,
.description:hover {
    display: block;
}

---

如果您需要使用 jQuery，您可以在 jQuery 选择器中包含 .description 元素：

Updated Example

$(".title, .description").hover(function () {
    // ...
});