Hoe een div weergeven en verbergen met CSS?

In mijn script staan ​​drie divs. Ik wil div weergeven met class="ab" wanneer ik op de eerste regel zweef en div weergeven met class="abc", wanneer ik op de tweede regel zweef. Anders wil ik standaard div met class="a" weergeven.

Maar het geeft nooit de div weer met 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>

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes