All' Hover di un DIV Modificare i suoi oggetti

**Dario the best** · 04-07-2014, 20:32

Salve, ho creato un div contenente una label ed un hyperlink.

All'hover del div il colore di sfondo cambia, e vorrei automaticamente cambiare anche il colore sia della label sia dell'hyperlink per abbinarli meglio al colore di sfondo del div.

Tramite css cambio facilmente colore di sfondo del div mediante ".hover", ma per cambiare automaticamente anche i suoi oggetti come potrei fare lato css?

ecco un esempio di un sito che lo fa:

http://www.lamborghini-tractors.com/...news-ed-eventi

come potrete vedere al passaggio del mouse non cambia solo il colore di sfondo del div, ma anche il colore delle label o hyperlink.

Grazie.

**Mich_** · 07-07-2014, 11:25

Non so se risponde alla tua domanda ...

Dato un codice HTML

codice:

<div id="wrapper">
    <p> ... <a href="..." title="...">questo e` un link fuori dal cambiacolor</a> ...
        <br />
        <br />
    </p>
    ...
  <div id="cambiacolor">
    <p> ... <a href="..." title="...">questo e` un link dentro il cambiacolor</a> ...
        <br />
        <br />
    </p>
    <p> ...
        <br />
        <br />
    </p>
  </div> <!-- cambiacolor -->

Puoi definire il CSS:

codice:

a {
  color: red;
}
a:hover {
  color: blue;
}
#cambiacolor {
  background-color: gray;
}
#cambiacolor:hover {
  background-color: blue;
}

#cambiacolor a {
  color: pink;
}
#cambiacolor:hover a {
  color: green;
}
#cambiacolor:hover a:hover {
  color: red;
}

PS: non so se ho messo tutte le possibili situazioni, e non so se ci sono errori di sintassi
Spero di averti dato l'idea della logica che ci sta dietro.

**Dario the best** · 10-07-2014, 23:05

Grazie per aver risposto. Purtroppo non è questo che cercavo. Sono consapevole del cambio colore al passaggio del mouse (hover).

Nel mio caso al passaggio del mouse sul div deve cambiare il colore sia del div sia degli oggetti al suo interno (label, textbox).

**KillerWorm** · 11-07-2014, 00:35

Ciao, l'esempio di Mich_ fa notare quale logica devi usare per poter "selezionare" degli elementi figli attraverso l'hover di un elemento padre, e quindi cambiarne il colore. Ho l'impressione che tu non abbia afferrato questo particolare. A livello di logica è esattamente ciò che stai chiedendo. Chiaramente nel tuo caso in particolare dovrai selezionare elementi <label> e quant'altro anziché elementi <a>.

Ad ogni modo puoi estendere la selezione a qualsiasi elemento interno al tuo div, attraverso l'uso del selettore * (asterisco).

Ecco un esempio funzionante da cui puoi prendere spunto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .undiv, .undiv *{
        color: DarkSlateBlue;
        background: GhostWhite;
      }
      .undiv:hover,.undiv:hover * {
        color: White;
        background: MidnightBlue;
      }
    </style>
  </head>
  <body>
    <div class="undiv">
      <label>una label <input type="text" value="del testo in un input"></label>
      <p>altro testo in altri elementi<br><a href="#">un link</a></p>
    </div>
  </body>
</html>

**Dario the best** · 14-07-2014, 22:05

Avevi ragione, la risposta di Mich_ era corretta, non avevo letto attentamente, me ne scuso. Grazie mille.

Ne approfitto per un'ulteriore piccola domanda: ad un oggetto (label, hyperlink, ecc) potrei designare una traccia alla scrittura. Esempio se nella mia label ci scrivo "Pippo" con color Red, ad essa potrei applicare un bordino di 2 px nero??

Grazie in anticipo.

**KillerWorm** · 14-07-2014, 22:43

se nella mia label ci scrivo "Pippo" con color Red, ad essa potrei applicare un bordino di 2 px nero??

Certamente. Hai provato?

**Dario the best** · 14-07-2014, 23:59

Si ho provato il border - style, ma mi mette il bordo attorno all'oggetto, non attorno alle lettere. E' la che voglio far apparire un bordo, un po' come la traccia quando usi photoshop.

**KillerWorm** · 15-07-2014, 00:10

Ok, allora non avevo capito cosa intendevi. Per applicare un contorno ai caratteri puoi usare l'ombra.
Ad ogni modo mi pare che l'argomento non abbia niente a che fare col tema in oggetto, sarebbe quindi meglio aprire un'altra discussione in modo da evitare di fare confusione.

Discussione: All' Hover di un DIV Modificare i suoi oggetti

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

All' Hover di un DIV Modificare i suoi oggetti

Permessi di invio