How to make a div that appear on hover, stay while its hovered on in jquery or css

I have a div called title, and another one called description. I have managed to make the div description appear while hovering on title. here is the fiddle

Now I want to make the div description: “How to make a div that appear on hover, stay while its hovered on in jquery or css”m hovering on it (ON THE DESCRIPTION DIV). Once i remove the hover form the div description, it should hide.

Here is my html

<span class="title: "How to make a div that appear on hover, stay while its hovered on in jquery or css">Last</span>
<div class="description: "How to make a div that appear on hover, stay while its hovered on in jquery or css">some description</div>

Here is my 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();
}

And this is the CSS

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

solution

You may not need jQuery to do this.

Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +:

Example Here

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

If you need to use jQuery, you can just include the .description element in your jQuery selector:

Updated Example