如何使一个div出现在悬停时，留在它在jquery或css中徘徊

Question

我有一个名为title的div，另一个名为description。 我已设法在悬停在标题上时显示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 () {
    // ...
});