Javascript: gestione opacità

**marco.agelao** · 11-10-2015, 15:01

Salve
come posso gestire il livello di opacità tramite javascript?
nella gestione del foglio di stile ho creato una classe

codice:

.trasparenza{
    filter: alpha(opacity=50);
    -moz-opacity: .50;
    opacity: .50;
}

ora devo aumentare al 100% l'opacità all'evento sovrapposizione del mouse e riportarla a 50% quando non è più sovrapposto.
Come posso fare?

**KillerWorm** · 11-10-2015, 18:51

Ciao

come posso gestire il livello di opacità tramite javascript?

Ti pongo prima una domanda:
"Perché pensi lo si debba fare con JavaScript o perché pensi di farlo in quel modo e non col solo CSS?"

A meno che non ci sia qualche motivo specifico perché tu voglia farlo con JavaScript, dal momento che CSS ti offre anche tali funzionalità, perché non farlo direttamente col CSS?

In CSS puoi farlo tramite l'uso del selettore :hover:

codice:

.trasparenza{
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
}
.trasparenza:hover{
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

Se vuoi, puoi ottenere anche un effetto di transizione con l'uso della proprietà transition.

Potrebbe essere una cosa del genere (nel caso tu voglia avere un maggiore supporto cross-browser, aggiungi gli eventuali prefissi e le opportune regole che qui non ho specificato):

codice:

.trasparenza{
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
    transition: .2s;
}
.trasparenza:hover{
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

**marco.agelao** · 11-10-2015, 19:51

Grazie per la risposta.
Si ovviamente tramite selettore risolvo comunque ma a me interessava capire anche come poterlo fare in javascript.

**KillerWorm** · 11-10-2015, 21:13

Figurati.

Si ovviamente tramite selettore risolvo comunque

Io direi piuttosto che col selettore risolvi al meglio e con JavaScript risolvi comunque ma in maniera più macchinosa.

Con JavaScript puoi usare, in generale, gli eventi onmouseover e onmouseout, quindi assegnare la classe o le regole css all'elemento in questione.

Ad ogni modo il procedimento può essere applicato in svariati modi e può differire anche di molto a seconda del contesto in cui devi applicare questo effetto e delle tue specifiche esigenze. La mia domanda era anche intenta a chiarire meglio eventuali dettagli per poterti fornire una soluzione mirata.

In particolare non si capisce: se vuoi ottenere l'effetto su tutti gli elementi con tale classe o se puoi specificare un elemento tramite ID a cui applicare quell'effetto; se vuoi sfruttare comunque quel css (con quella classe) e gestirlo poi con JavaScript (sovrascrivendo le regole attraverso la proprietà style o usando diverse classi definite per i due stati) oppure gestire il tutto solo da JavaScript definendo direttamente lo style sull'elemento in questione; se puoi usare jQuery (che comunque è JavaScript) oppure vuoi usare solo puro JavaScript.

Questo può essere uno dei tanti modi:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="trasparente">Lorem ipsum dolor sit amet</div>
    <script type="text/javascript">
      var elemento = document.getElementById("trasparente");
      elemento.style.opacity = .5;
      elemento.onmouseover = function(){
        this.style.opacity = 1;
      }
      elemento.onmouseout = function(){
        this.style.opacity = .5;
      }
    </script>
  </body>
</html>

Discussione: Javascript: gestione opacità

Strumenti discussione

Ricerca discussione

Visualizza

Javascript: gestione opacità

Permessi di invio