How to display and hide a div with CSS?

Question

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".

.abc,.ab {
    display: none;
}
#f:hover ~ .ab {
    display: block;

}
#f:hover ~ .abc,.a {
    display: none;

}
#s:hover ~ .abc {
    display: block;

}
#s:hover ~ .ab,.a {
    display: none;
}

<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

Here is my JSFiddle of my problem: JSFiddle Link

Womenfolk

Answer 1

You need

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

Updated demo at http://jsfiddle.net/gaby/n5fzB/2/

---

The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.

Shebat

Ahhh that's what he meant. He could have just said "Hide .a when one of the others is hovered over". – Shriner

Thanks ! It work ! But still I don't understand, why my script never display div with class a. :( – Womenfolk

@mridul, because the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden – Shebat

Thanks . This worked. I needed to hide the jumbotron class from bootstrap in one of the pages. This is how I did it. <style> .jumbotron { display: none; visibility: hidden; } </style> – Herr

Answer 2

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.

Deciare

why wouldn't one use just display: none; ? – Statute

The visibility rule is indeed redundant when you set display:none. Note that a toggling display may cause surrounding elements to move as a result of space reallocation. If this "jumping" effect is undesired, one might want to use visibility instead. – Shwalb

Answer 3

you can use any of the following five ways to hide element, depends upon your requirements.

Opacity

.hide {
  opacity: 0;
}

Visibility

.hide {
   visibility: hidden;
}

Display

.hide {
   display: none;
}

Position

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

clip-path

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

To show use any of the following: opacity: 1; visibility: visible; display: block;

Source : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

Keithakeithley

Answer 4

Html Code :

    <a id="f">Show First content!</a>
    <br/>
    <a id="s">Show Second content!!</a>
    <div class="a">Default Content</div>
    <div class="ab hideDiv">First content</div>
    <div class="abc hideDiv">Second content</div>

Script code:

$(document).ready(function() {
    $("#f").mouseover(function(){
        $('.a,.abc').addClass('hideDiv');
        $('.ab').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });

    $("#s").mouseover(function(){
        $('.a,.ab').addClass('hideDiv');
        $('.abc').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });
});

css code:

.hideDiv
{
    display:none;
}

Homeopathist

Answer 5

.abc,.ab {
    display: none;
}
#f:hover ~ .ab {
    display: block;

}
#f:hover ~ .abc,.a {
    display: none;

}
#s:hover ~ .abc {
    display: block;

}
#s:hover ~ .ab,.a {
    display: none;
}

<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

Serge

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Thermaesthesia

Answer 6

html code :

<button class="Show">Show</button> 
<button class="Hide">Hide</button>
<button class="toggle">Show &amp; Hide</button>
<div id="target"></div>

css code :

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

javascript code :

    $('.Show').click(function() {
    $('#target').show(200);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
    $('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
    $('.toggle').click(function() {
    $('#target').toggle('slow');
});

Clemence

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Thermaesthesia