jQuery mouseover() method e metodo mouseout() per eventi

jQuery mouseover() method – In questa lezione studieremo il metodo mouseover() che si verifica quando, come suggerisce già il nome, passiamo su un elemento di una pagina web con il nostro mouse.

Quindi potremmo ad esempio desiderare di mostrare una descrizione quando passiamo su un’immagine o su un titolo, ecc…

La sintassi di questa funzione è dunque questa:

$(selettore).mouseover()

o si può anche, come abbiamo visto negli altri metodi, collegare una funzione che chiaramente può essere opzionale.

$(selettore).mouseover(funzione).

Spesso questo metodo viene utilizzato insieme al metodo mouseout() che ha la stessa sintassi, infatti:

$(selettore).mouseout()

$(selettore).mouseout(funzione).

Esempio di utilizzo di jQuery mouseover() method

Facciamo subito un esempio per capire lo scopo del metodo.

Passate sulla scritta sotto con il mouse, vedrete la formattazione del testo modificare, quando il puntatore del mouse è sopra il testo. Ma anche quando il puntatore del mouse si allontana, la formattazione rispetto alla situazione iniziale cambia.

Coding creativo. Porta il mouse su questo paragrafo

Per realizzare questo semplice esempio ho creato innanzitutto un livello impostando l’id uguale a stile.

<div id="stile">Coding creativo. Porta il mouse su questo paragrafo</div>

Dopo ho incluso la libreria jQuery:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Poi ho realizzato lo script utilizzando jQuery mouseover() method e anche il metodo mouseout(). Ho utilizzato anche il metodo css() che ho spiegato nella lezione precedente per cambiare formattazione al testo.

<script type="text/javascript">
$(document).ready(function(){
  $("#stile").mouseover(function(){
    $("#stile").css({
               "background-color": "#999999",
               "color": "yellow",
               "font-size": "20px",
               "font-weight": "bold"
       });
  });
  $("#stile").mouseout(function(){
    $("#stile").css({
               "background-color": "#1058a1",
               "color": "#a4cef8",
               "font-size": "22px",
               "font-style": "italic"
       });
  });
});
</script>

Ecco quindi un semplice utilizzo di jQuery mouseover() method e del metodo mouseout().

Nella prossima lezione studieremo ancora altri metodi.

Lezione precedente: jQuery gallery

Lezione successiva: mouseenter(), mousemove(), mouseleave()