CSS: al passaggio del mouse su un elemento, effetto per più elementi?

Sto cercando un metodo per il mio problema di hovering.CSS: al passaggio del mouse su un elemento, effetto per più elementi?

<div class="section"> 

<div class="image"><img src="myImage.jpg" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

Ora, entrambe le classi (immagine e livello) hanno bordi, entrambi hanno colori diversi per normale e hover. C'è un modo per farlo se passo il mouse sulla classe del livello, sia il colore del bordo che passa sopra la classe dell'immagine e del livello è attivo? E viceversa?

fonte

2009-09-22 Marko

160

Non è necessario JavaScript per questo.

Alcuni CSS potrebbero farlo. Ecco un esempio:

<html> 
 
    <style type="text/css"> 
 
    .section { background:#ccc; } 
 
    .layer { background:#ddd; } 
 
    .section:hover img { border:2px solid #333; } 
 
    .section:hover .layer { border:2px solid #F90; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="section"> 
 
    <img src="myImage.jpg" /> 
 
    <div class="layer">Lorem Ipsum</div> 
 
    </div> 
 
</body> 
 
</html>

fonte

2009-09-22 20:58:17 corymathews

+10

Okey, ecco il vincitore !! :) Non sapevo che se avessi qualcosa: al passaggio del mouse, posso continuare con un altro elemento! (somthing: hover .second) .. Ogni giorno impari qualcosa di nuovo .. Grazie x10 – Marko

Anche io non lo sapevo. Grazie per l'aiuto. – fadedbee

Cosa succede se i due div (quello su cui passa il mouse sopra e quello da mostrare) non si trovano all'interno della stessa div genitore immediata? – bikashg

Avresti bisogno di usare JavaScript per realizzare questo, credo.

jQuery:

$(function(){ 
    $("#innerContainer").hover(
     function(){ 
      $("#innerContainer").css('border-color','#FFF'); 
      $("#outerContainer").css('border-color','#FFF'); 
     }, 
     function(){ 
      $("#innerContainer").css('border-color','#000'); 
      $("#outerContainer").css('border-color','#000'); 
     } 
    ); 
});

Regolare i valori e l'elemento di identificazione di conseguenza :)

fonte

2009-09-22 20:26:36 inkedmn

Bello, davvero bello! E se avessi più sezioni per nomi di classi uguali? Ora l'ho provato per quattro nomi uguali di classe e quando lo alzo uno, tutti questi cambiamenti ?? Devo rendere il numero progressivo davanti a tutte le sezioni? Jquery ha il supporto di caratteri jolly anykind? (okey, provo solo google per questo!;)) Grazie .. – Marko

Questo non è difficile da raggiungere, ma è necessario utilizzare la funzione javascript onmouseover. Pseudoscript:

 
<div class="section "> 

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

Usa i tuoi colori. Puoi anche fare riferimento a funzioni javascript nel comando mouseover.

fonte

2009-09-22 20:30:32 eykanal

+1 per l'utilizzo del cambio di classe CSS anziché dell'elemento uno come altro esempio. – DVK

Anche questo funziona, grazie! Cerco solo di evitare la codifica in linea più che posso ..;) – Marko

:) Sì, è quello che ottieni quando digito il codice 's sporco in fretta. – eykanal

Questo ha funzionato per me in Firefox e Chrome e IE8 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
     div.section:hover div.image, div.section:hover div.layer { 
      border: solid 1px red; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="section"> 
      <div class="image"><img src="myImage.jpg" /></div> 
      <div class="layer">Lorem Ipsum</div> 
     </div> 
    </body> 
</html>

... si potrebbe voler testare questo con IE6 così (non sono sicuro se funzionerà lì) .

fonte

2009-09-22 20:38:25

In realtà può funzionare in IE8, a quanto pare. L'aggiunta del Doctype ha fatto la differenza. Quindi lì - una soluzione CSS pura. ;) –

penso che l'opzione migliore per voi è quello di racchiudere entrambi i div da un altro div. Poi si può fare dal CSS nel modo seguente:

<html> 
<head> 
<style> 
    div.both:hover .image { border: 1px solid blue } 
    div.both:hover .layer { border: 1px solid blue } 
</style> 
</head> 

<body> 
<div class="section"> 

<div class="both"> 
    <div class="image"><img src="myImage.jpg" /></div> 
    <div class="layer">Lorem Ipsum</div> 
</div> 

</div> 
</body> 
</html>

fonte

2009-09-22 21:03:46 Viliam

.section:hover > div { 
    background-color: #0CF; 
}

NOTA Parent stato elemento può solo influenzare lo stato elemento di un bambino in modo da poter utilizzare:

.image:hover + .layer { 
    background-color: #0CF; 
} 
.image:hover { 
    background-color: #0CF; 
}

ma si non è possibile utilizzare

.layer:hover + .image { 
    background-color: #0CF; 
}

fonte

2013-09-09 11:45:26 Jnr

CSS: al passaggio del mouse su un elemento, effetto per più elementi?

risposta

Problemi correlati