How to display and hide a div with CSS?

css html hover siblings
mridul picture mridul · Dec 15, 2013 · Viewed 282.4k times · Source

In my script there are three divs. I want to display div with class="ab" when I hover on first line and display div with class="abc", when hover on second line. Otherwise I want to display div with class="a" by default.

But it never displays the div with class="a".

Here is my JSFiddle of my problem: JSFiddle Link

Answer

multiplatform picture multiplatform · Jun 5, 2014

To hide an element, use:

display: none;
visibility: hidden;

To show an element, use:

display: block;
visibility: visible;

The difference is:

Visibility handles the visibility of the tag, the display handles space it occupies on the page.

If you set the visibility and do not change the display, even if the tags are not seen, it still occupies space.

Related questions

Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More
How to affect other elements when one element is hovered

What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I want is that …

Read More
How to show text on image when hovering?

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using …

Read More