Wie das ein-und ausblenden eines div mit CSS?

In meinem Skript gibt es drei divs. Ich möchte die Anzeige div mit class="ab" wenn ich bewegen Sie den Mauszeiger auf die erste Zeile und Anzeige-div mit class="abc" beim schweben auf der zweiten Linie. Ansonsten möchte ich zur Anzeige div mit class="a" standardmäßig.

Aber es zeigt nie die div mit class="a".

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

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">First content</div>
<div class="abc">Second content</div>

Hier mein JSFiddle mein problem: JSFiddle Link

InformationsquelleAutor mridul | 2013-12-15
  1. 38

    Müssen Sie 

    .abc,.ab {
    display: none;
}

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

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

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

    Aktualisierte demo auf http://jsfiddle.net/gaby/n5fzB/2/

    Das problem in deiner original-CSS war, dass die , im css-Selektoren beginnt eine völlig neue Auswahl. es ist nicht kombinierbar.. so #f:hover ~ .abc,.a bedeutet #f:hover ~ .abc und .a. Sie auf display:none so war es immer ausgeblendet für alle .a Elemente.

    • Ahhh, das ist, was er meinte. Er hätte einfach gesagt "Verstecken .a wenn einem der andere ist mit der Maus auf".
    • Danke ! Es funktioniert ! Aber trotzdem verstehe ich nicht, warum mein Skript niemals angezeigt div mit der Klasse ein. 🙁
    • da die , im css-Selektoren beginnt eine völlig neue Auswahl. es ist nicht kombinierbar.. so #f:hover ~ .abc,.a bedeutet #f:hover ~ .abc und .a. Sie auf display:none so war es immer ausgeblendet
    • Danke . Dieser arbeitete. Ich musste ausblenden, die jumbotron-Klasse von bootstrap in eine der Seiten. Dies ist, wie ich es Tat. <style> .jumbotron { display: none; visibility: hidden; } </style>
    InformationsquelleAutor Gabriele Petrioli
  2. 43

    Ausblenden eines Elements:

    display: none;
visibility: hidden;

    Anzeigen eines Elements verwenden:

    display: block;
visibility: visible;

    Der Unterschied ist:

    Sichtbarkeit Griffe, die Sichtbarkeit des Tags, der display Griffe Speicherplatz auf der Seite.

    Wenn Sie die visibility und ändern Sie nicht die display, auch wenn die tags nicht gesehen, es immer noch Raum braucht.

    • warum würde man nicht nur display: none; ?
    • Die visibility Regel ist in der Tat redundant, wenn Sie display:none. Beachten Sie, dass ein Umschalten display verursachen umgebenden Elemente zu bewegen als Ergebnis der Raum-Umverteilung. Wenn dieses "springen" - Effekt ist nicht erwünscht, man könnte verwenden möchten visibility statt.
    InformationsquelleAutor multiplatform
  3. 10

    können Sie verwenden Sie eine der folgenden fünf Möglichkeiten sich zu verstecken-element, hängt von Ihren Anforderungen.

    Deckkraft

    .hide {
  opacity: 0;
}

    Sichtbarkeit

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

    Zeigen, verwenden Sie eine der folgenden:
    opacity: 1;
    visibility: visible;
    display: block;

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

    InformationsquelleAutor Aamer Shahzad
  4. 0

    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;
}
    InformationsquelleAutor Abhishek Mungekar
Schreibe einen Kommentar