CODEWITHSUNDEEP
javascriptjqueryhtmlcssshow-hide
BANGO
BANGO

Reputation: 57

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 stay visible while I'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">Last</span>

<div class="description">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; }

Upvotes: 2

Views: 1969

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

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

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

Upvotes: 6

Related Questions