jQuery hidden element stays hidden when showing with CSS

Question

I have an element which has display:none attribute. Now if a user hovers the parent, it will be shown:

.item:hover .description {
    display: block; 
    z-index: 1;
}

Now, when I execute

$(".description").hide()

to hide the element again (the user can click an X in the element to close it), the element will not show again if the user is hover the parent again. It stays hidden.

How do I not mess up with the css show and hide functions?

Answer 1

The way you have given your code is you are mixing up CSS and JavaScript. The jQuery uses inline-styles to accomplish the .hide() or show. And inline-styles are more specific than the CSS. Either use class es and toggle them or just use JavaScript.

I would do this way:

.item:hover .description {
  display: block; 
  z-index: 1;
}

.item .description {
  display: none;
}

The above is a pure CSS method. But using JavaScript, I would consider using toggleClass() instead of .hide() or .show() .

.item:hover .description {
  display: block; 
  z-index: 1;
}

.item .description.hidden {
  display: none;
}

And in the JS:

$(".description").addClass("hidden");

And when you want it to be shown, you can always use:

$(".description").removeClass("hidden");

And for toggling things, you can use:

$(".description").toggleClass("hidden");

Answer 2

It's because during hiding this element by JS, you set visibility: hidden to it. After next focus on parent, you won't set visibility: visible which is required.

You can for example execute

$(".description").show() 

after next focus on parent element

Answer 3

hide will add an inline style to hide the element, which will override the CSS style in this case.

If you're using JavaScript to hide the element, you'll need to use JavaScript to remove that inline style when no longer relevant. I'd use a mouseleave event handler on .item and a class to hide description :

CSS:

.item:hover .description.hide {
    display: none;
}

Hiding description in response to click on X:

$(".item .description").addClass("hide");

Removing that when the user no longer hovers .item :

$(".item").on("mouseleave", function() {
    $(this).find(".description.hide").removeClass("hide");
});

Either with direct handlers as above, or with event delegation (I use delegation in the example below).

Live Example:

 // Hide when X clicked $(document.body).on("click", ".item .description .close", function() { $(this).closest(".description").addClass("hide"); }); // Reset when user no longer hovering $(document.body).on("mouseleave", ".item", function() { $(this).find(".description.hide").removeClass("hide"); });

 .item .description { display: none; } .item:hover .description { display: block; z-index: 1; } .item:hover .description.hide { display: none; } /* The following are just for the demo */ .close { cursor: pointer; } .item { position: relative; height: 2em; border: 1px solid black; } .item .description { position: absolute; background-color: #eee; left: 10em; top: 2px; border: 1px solid #ddd; }

 <div class="item"> I'm item 1 <div class="description"> I'm description 1 <span class="close">[x]</span> </div> </div> <div class="item"> I'm item 2 <div class="description"> I'm description 2 <span class="close">[x]</span> </div> </div> <div class="item"> I'm item 3 <div class="description"> I'm description 3 <span class="close">[x]</span> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>