hide div on mouseenter — but keep it

Question

I have two divs — when mouseenter divA it should disappear and divB should appear. When mouseleave divB divA should show again and divB disappear. I’ve used this code to achieve it:

$("#divA").on("mouseenter", function() { $("#divA").hide(); $("#divB").show(); }); $("#divB").on("mouseleave", function() { $("#divA").show(); $("#divB").hide(); });`

The only problem is that when divA hides another div (which used to sit under it) enters his place … So the question is if there’s a way to let divA disappear visually but not “physically”? Thank you!

dwb · Accepted Answer · 2020-12-15 08:54:45Z

Check out this answer for more details on the differences between display, visiblility and opacity. In the link, what you're looking for is the ones which have a tick under occupies space.

Essentially you want to set its css property

element.hidden { opacity: 0; }

which visually hides the element, but it can still be interacted with.

Thanks a ton! When using $("#divA").css({"opacity":"0"}) and $("#divA").css({"opacity":"1"}) it works!

Dharman · Accepted Answer · 2020-12-15 09:12:40Z

Instead using display property, try using opacity property to do it:

$("#divA").on("mouseenter", function() { $("#divA").css("opacity", 0); $("#divB").css("opacity", 1); }); $("#divB").on("mouseleave", function() { $("#divA").css("opacity", 1); $("#divB").css("opacity", 0); });

Renan Borges · Accepted Answer · 2020-12-15 09:01:49Z

I guess you want something related to the css property called visibility. This property hides the element but 'keeps it there'.

https://www.w3schools.com/CSSref/pr_class_visibility.asp

And looks like you are using jQuery. So I searched a bit and I found this answer that explains precisely how to change the visibility of an element by using jQuery.

https://stackoverflow.com/a/9614662/2250437

Might be useful for you.

Aniket Suryavanshi · Accepted Answer · 2020-12-15 09:03:15Z

Insted of hide() and show(), try setting CSS visibility property as below:

$("#divA").on("mouseenter", function() { $("#divA").css('visibility', 'hidden'); $("#divB").css('visibility', 'visible'); }); $("#divB").on("mouseleave", function() { $("#divA").css('visibility', 'visible'); $("#divB").css('visibility', 'hidden'); });

Collectives™ on Stack Overflow

hide div on mouseenter — but keep it

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related