CSS - al passaggio del mouse, Show 'nipote'

Question

Ecco il codice che ho:

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



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

Quello che ho cercato di fare, è rendere hoverDivShow appare quando hoverDiv passa sopra.

L'HTML non può essere modificato.

Ho cercato altrove e non sono riuscito a trovare alcuna soluzione. Non sono sicuro di quello che sto facendo giusto/sbagliato. L'aiuto sarebbe carino

Grazie!

Answer 1

Come selettore "nipote" è necessario utilizzare .hoverDiv:hover ~ div .hoverDivShow. L'idea è di selezionare uno <div> che sia il fratello di .hoverDiv, quindi selezionare un figlio di quel fratello che abbia la classe hoverDivShow.

Ecco una demo funzionante:

.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

regola tuo secondo css .hoverDiv:hover ~ .hoverDivShow { display: block } utilizza un selettore fratello generale. Si cerca tutti gli elementi che seguono .hoverDiv su stesso livello DOM con una classe di hoverDivShow. Se rivedi la tua struttura, noterai che tali elementi non esistono.

As pointed out by Ed Cottrell, esiste un fratello con un bambino che ha quella classe. Quindi, utilizzando il selettore di fratello generale, è necessario indirizzare il figlio di quel fratello .hoverDiv:hover ~ div .hoverDivShow { [...] }

I made a fiddle for you spiegando molto visivamente la struttura di targeting del selettore generale di pari livello.

Nel tuo caso si potrebbe anche usare un selettore fratello adiacente in questo modo:

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

La differenza è che sarà solo obiettivo il primo elemento seguendo direttamente il vostro primo selettore sullo stesso livello DOM se corrisponde la vostra secondo selettore. Controlla il mio violino e this explanation su w3schools.