CSS - On Hover, Show 'Niece'

Question

Hier ist der Code, den ich habe:

<div class="hoverDiv">Hover</div> 
<div> 
    <div class="hoverDivShow"></div> 
</div> 



.hoverDivShow { 
    display: none; 
} 
.hoverDiv:hover ~ .hoverDivShow { 
    display: block; 
} 

Was ich zu tun versucht, ist machen hoverDivShow erscheinen, wenn hoverDiv ist vorbei schwebte.

Der HTML-Code kann nicht geändert werden.

Ich habe woanders gesucht und konnte keine Lösungen finden. Nicht wirklich sicher, was ich richtig/falsch mache. Hilfe wäre nett.

Danke!

Answer 1

Sie müssen .hoverDiv:hover ~ div .hoverDivShow als "Nichte" Selektor verwenden. Die Idee ist, ein <div> auszuwählen, das das Geschwister .hoverDiv ist, dann wählen Sie ein unterordnet von dem Geschwister aus, das die Klasse hoverDivShow hat.

Hier ist eine Arbeits Demo:

.hoverDivShow { 
 
    display: none; 
 
} 
 
.hoverDiv:hover ~ div .hoverDivShow { 
 
    display: block; 
 
}

<div class="hoverDiv">Hover</div> 
 
<div> 
 
    <div class="hoverDivShow">I'm hidden until you hover!</div> 
 
</div>

Answer 2

Ihre zweite CSS-Regel .hoverDiv:hover ~ .hoverDivShow { display: block } verwendet einen allgemeinen Geschwister-Selektor. Sie suchen nach alle Elemente, die folgen .hoverDiv auf dem gleichen DOM-Level mit einer Klasse von hoverDivShow. Wenn Sie Ihre Struktur überprüfen, werden Sie feststellen, dass solche Elemente nicht existieren.

As pointed out by Ed Cottrell, gibt es ein Geschwister mit einem Kind, das diese Klasse obwohl hat. Wenn Sie also den allgemeinen Geschwisterselektor verwenden, müssen Sie das Kind dieses Geschwisters ansprechen .hoverDiv:hover ~ div .hoverDivShow { [...] }

I made a fiddle for youI made a fiddle for you sehr visuell die Targeting-Struktur des allgemeinen Geschwisterselektors erklären.

In Ihrem Fall könnten Sie auch ein benachbartes Geschwister-Selektor wie folgen verwenden:

.hoverDiv:hover + div .hoverDivShow { [...] } 

Der Unterschied besteht darin, dass es nur das erste Element Ziel direkt Ihren ersten Selektor auf dem gleichen DOM Level folgt, wenn diese für Ihre zweiter Wahlschalter. Schau dir meine Geige und this explanation auf w3schools an.