Cambiare il div padre in uno sfondo diverso quando si passa il mouse sulle div individuali per bambino

Question

Sto vedendo le soluzioni per ottenere questo risultato quando si ha a che fare con un solo effetto di hover desiderato, ma voglio avere quattro div figlio che cambiano le div principali del genitore principale sfondo per un'immagine separata.

Suppongo che ciò non sia possibile con i CSS.

<div id="buttonBox"> 
    <div id="schedBox"> 
    <a href="#">Schedule</a> 
    </div> 
    <div id="transBox"> 
    <a href="#">Transformation</a> 
    </div> 
    <div id="destBox"> 
    <a href="#">Destination</a> 
    </div> 
    <div id="inspirBox"> 
    <a href="#">Inspiration</a> 
    </div> 
</div> 

In alternativa, potrei fare in modo che i div dei bambini abbiano uno sfondo diverso. Passando il passaggio di un div al bambino cambierebbe tutti gli sfondi div figlio in un colore separato, ma non riuscivo a capire come avere un passaggio del mouse sulla 2a divisione influisce sul precedente div ... solo i fratelli successivi.

Answer 1

Purtroppo non ci sono selettori genitori in CSS.

Dovresti utilizzare javascript per ottenere ciò che desideri.

Answer 2

Mentre il selettore genitore effettivo non è possibile tramite CSS, è possibile "modificarlo" per il tuo caso utilizzando elementi aggiuntivi e posizionamento.

Quello che ti serve è cambiare lo sfondo in base a quale elemento è al passaggio del mouse - ok! Aggiungiamo pseudo-elementi (o elementi normali, se avrete bisogno di IE di sostegno) e posizionarli sopra il genitore con posizionamento assoluto e positivo z-index:

#buttonBox { 
    position: relative; 
    z-index: 1; 
} 

#buttonBox > div:before { 
    content: ""; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
} 

Questi elementi posizionati dovrebbero avere negativo z-index, in modo che sarebbe essere collocati sotto tutti gli altri contenuti, ma sullo sfondo dell'elemento genitore.

In questo modo è possibile aggiungere le regole come

#schedBox:hover:before { background: lime; } 
#transBox:hover:before { background: red; } 
#destBox:hover:before { background: orange; } 
#inspirBox:hover:before { background: yellow; } 

E la pseudo-sfondo del genitore cambierebbe al passaggio del mouse!

L'unica cosa da sapere è che non dovrebbero esserci elementi con posizione non statica tra il genitore e gli elementi con il ruolo di sfondo.

Here is the live example at dabblet

Answer 3

Sì, è possibile. Prova questo:

#schedBox:hover, #buttonBox{ 
    background: red; 
} 

#schedBox:hover{ 
    background: green; 
}