web-dev-qa-db-fra.com

Comment afficher et masquer une div avec CSS?

Dans mon script, il y a trois divs. Je souhaite afficher div avec class="ab" lorsque je survole la première ligne et d’afficher div avec class="abc", lors du survol de la deuxième ligne. Sinon, je veux afficher div avec class="a" par défaut.

Mais il n’affiche jamais la div avec 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>

Voici mon JSFiddle de mon problème: Lien JSFiddle

csscss3htmlhoversiblings
41
mridul

Vous avez besoin

.abc,.ab {
    display: none;
}

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

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

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

Mise à jour de la démo à http://jsfiddle.net/gaby/n5fzB/2/

Le problème dans votre CSS original était que le sélecteur , dans les sélecteurs css ouvrait un tout nouveau sélecteur. ainsi, #f:hover ~ .abc,.a signifie #f:hover ~ .abc et .a. Vous définissez ce paramètre sur display:none afin qu'il soit toujours défini pour être masqué pour tous les éléments .a.

38
Gabriele Petrioli

Pour masquer un élément, utilisez:

display: none;
visibility: hidden;

Pour afficher un élément, utilisez:

display: block;
visibility: visible;

La différence est:

Visibility gère la visibilité de la balise, la display gère l’espace qu’elle occupe sur la page.

Si vous définissez la visibility et ne changez pas la display, même si les balises ne sont pas visibles, il occupe toujours de l'espace.

43
multiplatform

vous pouvez utiliser l’une des cinq méthodes suivantes pour masquer un élément, selon vos besoins.

Opacity

.hide {
  opacity: 0;
}

Visibilité

.hide {
   visibility: hidden;
}

Afficher

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

Pour afficher, utilisez l'un des éléments suivants: opacité: 1; visibilité: visible; affichage: bloc ;

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

10
Aamer Shahzad

Code HTML :

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

Code de script:

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

code css:

.hideDiv
{
    display:none;
}
0
Abhishek Mungekar