How to display and hide a div with CSS?

user_1905947 0
Viewed 358544

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

siblings hover css html
5 Answers

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');
});
user_194237070
Related