Puoi applicare un effetto hover CSS a un elemento che non è figlio dell'elemento al passaggio del mouse?

Question

Non ero sicuro se fosse possibile o no. Sto lavorando alle animazioni CSS3 in questo momento e ho bisogno di passare il mouse su un collegamento che avrà effetto su altri elementi div (non-child) nella pagina. Non ero sicuro se ci fosse un lavoro in giro o no.

<style type="text/css"> 

#header { 
background-color:red; 
} 

#header:hover .element { 
background-color:blue; 
} 

.element { 
background-color:green; 
} 

</style> 

-

<header id="header"> 
    <li><a href="#">Hover</a></li> 
</header> 

<div class="element" > 
<p>hello world </p> 
</div> 

Answer 1

non penso così. Questa costruzione: #header .bgchange: hover .element indica che .element è all'interno di .bgchange. Immagino che questo abbia bisogno di JS

Answer 2

Sfortunatamente questo non funzionerà a meno che la tua classe .element non sia all'interno dell'elemento .bgchange. Questa è la natura della cascata: non è possibile (tramite il solo CSS) influenzare gli elementi DOM strutturalmente/gerarchicamente rimossi gli uni dagli altri.

Answer 3

C'è lo general sibling selector (~) che seleziona elementi di pari livello.

Quindi con l'HTML che hai postato, #header:hover ~ .element selezionare <div class="element"> quando è un fratello successivo dell'intestazione nascosta.

Even IE 7 supports it, quindi sei su un terreno relativamente solido.

Answer 4

Poiché si tratta di fratelli adiacenti, è possibile utilizzare adjacent sibling selector: +.

#header:hover + .element { 
background-color:blue; 
} 

Questo è ben supportato nella maggior parte dei browser moderni *. IE7 può essere bacato. IE6 e seguenti non lo supportano.

* Una delle altre risposte menziona il selettore di pari livello generale, che non funziona in Webkit se utilizzato con una pseudo-classe dinamica come :hover a causa di this bug. Prendi nota che questo stesso bug causerà problemi in Webkit se tenti di impilare selettori di fratelli adiacenti con una pseudo-classe dinamica. Ad esempio, #this:hover + sibling + sibling non funzionerà in Webkit.

Answer 5

Re il webkit bug selettore di pari livello, questo articolo ha un css unica soluzione:

http://css-tricks.com/webkit-sibling-bug/

Citando:

body { -webkit-animation: bugfix infinite 1s; } 
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } 

Sopra crea un'animazione sulla pagina, e questo sembra magicamente risolvere il problema. Quanto sopra può essere aggiunto direttamente al css principale o creare un solo foglio di stile per il webkit da usare con il tuo ie hacks.

Consigliamo il webkit foglio di stile solo qualcosa di simile:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/> 

come si nasconde da altri browser e può essere più facilmente rimossa in futuro una volta che il bug è stato risolto.