Hoe een div weergeven en verbergen met CSS?

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

Antwoord 1, autoriteit 100%

Je hebt

. nodig

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

Bijgewerkte demo op http://jsfiddle.net/gaby/n5fzB /2/

Het probleem in je originele CSS was dat de , in css-selectors een geheel nieuwe selector start. het wordt niet gecombineerd.. dus #f:hover ~ .abc,.a betekent #f:hover ~ .abc en .a. Je stelt dat in op display:none, dus het was altijd zo ingesteld dat het verborgen was voor alle .a-elementen.

Antwoord 2, autoriteit 98%

Om een ​​element te verbergen, gebruik:

display: none;
visibility: hidden;

Om een ​​element te tonen, gebruik:

display: block;
visibility: visible;

Het verschil is:

Zichtbaarheid regelt de zichtbaarheid van de tag, het display regelt de ruimte die het op de pagina inneemt.

Als je de visibility instelt en de display niet verandert, zelfs als de tags niet worden gezien, neemt het nog steeds ruimte in beslag.

Antwoord 3, autoriteit 26%

u kunt elk van de volgende vijf manieren gebruiken om elementen te verbergen, afhankelijk van uw vereisten.

Dekking

.hide {
  opacity: 0;
}

Zichtbaarheid

.hide {
   visibility: hidden;
}

Weergeven

.hide {
   display: none;
}

Positie

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

clip-pad

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

Gebruik een van de volgende opties om weer te geven:
dekking: 1;
zichtbaarheid: zichtbaar;
weergave: blokkeren;

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

Antwoord 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>

Scriptcode:

$(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;
}