I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle
Now, I want to change the functionality so that the description div stays visible while I'm hovering over it directly (ON THE DESCRIPTION DIV). When I move my cursor away from the description div, it should hide again.
Here is a snippet of my HTML:
<span class="title">Last</span>
<div class="description">some description</div>
Below is the JavaScript code that controls this behavior:
var cancel = false;
$("div.description").hide();
$(".title").hover(function () {
cancel = (cancel) ? false : true;
if (!cancel) {
$("div.description").hide();
} else if (cancel) {
$("div.description").show();
}
});
Lastly, here is the relevant CSS styling for these elements:
.title { background: red; }
.description { background: yellow; }