Uso pseudo-classe :hover

**Marco.Maffei-12** · 22-02-2014, 16:30

Ciao a tutti, sto lavorando con una pagina web ma non riesco a risolvere un problema. Questa è la situazione: ho tre immagini posizionate sulla stessa linea, quando passo su ognuna di essa voglio che mi compare una descrizione a comparsa dall'alto (trasformazione traslate), sotto le immagini, relativa all'immagine su cui passo. Un'immagine, una descrizione. Il problema è che voglio che la descrizione non sia di larghezza uguale alla foto (100x100 px) ma di larghezza 100% della finestra, quindi il contenitore della descrizione è più largo. Si può applicare un effetto ad un elemento che non sia per forza figlio di un altro elemento a cui è applicata la pseudo-classe :hover con css?

**KillerWorm** · 22-02-2014, 20:17

Originariamente inviata da Marco.Maffei-12

Si può applicare un effetto ad un elemento che non sia per forza figlio di un altro elemento a cui è applicata la pseudo-classe :hover con css?

Ciao. La risposta breve è: NO. Nello specifico, puoi selezionare elementi adiacenti ma che abbiano lo stesso padre.

Per risolver puoi però assegnare una cosa tipo:

codice:

{position:absolute;left:0;width:100%}

In sostanza, questo fa in modo che l'elemento si dimensioni in base alla finestra.

**Marco.Maffei-12** · 23-02-2014, 18:22

Nello specifico, puoi selezionare elementi adiacenti ma che abbiano lo stesso padre.

Grazie per l'aiuto. Voglio farti una domanda. Prendiamo questo esempio html:

codice:

<div class="padre">
     <img id="img1" src="img1.jpg">
     <img src="img2.jpg">
     <img src="img3.jpg">
     <p>testo</p>
</div>

Posso usare la pseudo-classe :hover sull'id img1 e applicare l'effetto all'elemento <p>?

**KillerWorm** · 23-02-2014, 19:15

Sì, puoi farlo col selettore sibling (fratello) che viene specificato col carattere tilde (~).

codice:

#img1:hover ~ p {color:red}

**KillerWorm** · 23-02-2014, 19:49

Giusto per dare qualche spunto, posto un esempio che ho buttato giù rispetto a quanto hai indicato:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      h1{
        color:olive;
        text-align:center;
      }
      #album {
        background:yellowgreen;
        width:352px;
        height:124px;
        padding:20px 0 0 20px;
        margin:0 auto;
      }
      #album>div {
        margin-right:10px;
        float:left;
      }
      #album img {
        border:2px solid transparent;
        width:100px;
        height:100px;
        transition: border-color .4s, border-bottom-width 0s 1.2s;
      }
      #album>div>div { /* DESCRIZIONE */
        position:absolute;
        left:0;
        margin-top:-5px;
        padding:10px 0;
        width:100%;
        color:white;
        text-align:center;
        background:olivedrab;
        z-index:-99;
        opacity:0;
        visibility:hidden;
        transform:translateY(-25px);
        transition: opacity .2s .2s, transform 0s .4s, visibility 0s .4s, z-index .4s;
      }
      #album>div:hover img {
        border-color:olivedrab;
        border-bottom-width:22px;
        transition: border-color .2s;
      }
      #album>div:hover div {
        z-index:99;
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        transition: opacity .2s, transform .3s;
      }
    </style>
  </head>
  <body>
    <h1>Photobook</h1>
    <div id="album">
      <div><img src="img/immagine1.png"><div><h2>Immagine 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
      <div><img src="img/immagine2.png"><div><h2>Immagine 2</h2><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div>
      <div><img src="img/immagine3.png"><div><h2>Immagine 3</h2><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div>
    </div>
  </body>
</html>

Nota: ribadisco che è solo un esempio. Per le nuove specifiche css3 sono da inserire eventualmente le regole aggiuntive per il crossbroesing.

**Marco.Maffei-12** · 25-02-2014, 21:35

Grazie. Ho preso spunto dal tuo esempio e sono arrivato alla soluzione. Basta sapersi muovere tra gli elementi tramite i selettori in css. Faccio un esempio (non completo di tutti i tag ma solo dei tag in questione), dovesse servire per qualcun'altro:

codice:

Codice html

<div id="album">
   <imgsrc="img/immagine1.png">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor                                                 incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Codice css

#album { /* tutto il contenitore */
        background:yellowgreen;
        width:100px;
        height:100px;
        padding:20px 0 0 20px;
        margin:0 auto;
      }

div#album>div>p { /* seleziona il tag <p> */
       position:absolute;
        left:0;
        margin-top:-5px;
        padding:10px 0;
        width:400px;
        color:white;
        text-align:center;
        background:olivedrab;
        z-index:-99;
        -webkit-transform: translateY(-300px);
    -moz-transform: translateY(-300px);
    -o-transform: translateY(-300px);
    -ms-transform: translateY(-300px);
    transform: translateY(-300px);
        -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
      }
div#padre>div { /* contenitore del tag <p>. il tag viene nascosto perché fuori dal suo contenitore (traslateY(-300px)) */
        position: absolute;
        overflow: hidden;
        width: 400px;
        height: 400px;
      }

div#padre>img { /* elemento img */
        border:2px solid transparent;
        width:100px;
        height:100px;
        transition: border-color .4s, border-bottom-width 0s 1.2s;
      }
div#padre>img:hover { /* pseudo-classe che applica l'effetto allo stesso img */
        border-color:olivedrab;
        border-bottom-width:22px;
        transition: border-color .2s;
      }
 div#padre>img:hover +div>p { /* l'hover si applica a <img> ma l'effetto si ha su <p> */
        -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
      }

Il selettore importante è '+div>p'. che passa prima dal fratello <div> di <img> e infine seleziona l'elemento <p>, figlio di <div>. è chiaro che ora devo creare gli altri elementi.

Grazie

Discussione: Uso pseudo-classe :hover

Strumenti discussione

Ricerca discussione

Visualizza

Uso pseudo-classe :hover

Permessi di invio