jQuery hover(), metodo della libreria jQuery, coding creativo

In questa lezione studieremo il metodo jQuery hover().

Nella scorsa lezione abbiamo studiato i metodi mouseover(), mouseout(), mousemove(), mouseenter() e mouseleave(), cercando di capirne le differenze d’uso.

Il metodo hover() specifica due funzioni da eseguire quando il mouse passa sopra l’elemento e quando si allontana. La prima funzione specifica cosa succede quando il puntatore del mouse passa sopra l’elemento, mentre la seconda quando il puntatore del mouse non è più sopra l’elemento. In definitiva fa quello che mouseenter() e mouseleave() fanno utilizzate assieme.

Quindi in questo caso la sintassi è:

$(selettore).hover(handlerIn, handlerOut)

Dove, come dicevamo prima con handlerIn intendiamo la funzione che specifica cosa fare quando il mouse tocca l’elemento, mentre handlerOut specifica cosa fare quando il mouse esce dall’elemento. HandlerOut è opzionale ed in questo caso verrà sempre eseguita handlerIn sia per mouseenter() che per mouseleave().

Banner Pubblicitario

Esempio con jQuery hover() method

Riprendiamo lo stesso esempio che abbiamo creato in un articolo precedente e lo modifichiamo in modo da utilizzare il metodo .hover().

Passate dunque sul livello sotto, noterete che la formattazione cambierà.

Coding creativo. Porta il mouse su questo paragrafo

Per realizzare questo semplice esempio, innanzitutto includiamo la libreria jQuery.

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

Dopo inseriamo il nostro livello su cui vogliamo si verifichi l’evento.

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

Quindi realizziamo lo script. La prima funzione richiama il metodo css a cui ho dato una specifica formattazione, la seconda funzione richiama sempre il metodo css ma con un’altra formattazione.

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

Esempio 2 di utilizzo del metodo hover()

In questo secondo esempio su jQuery hover() method scriveremo un testo differente a seconda se il mouse sia o no sopra l’elemento.

Coding creativo. Porta il mouse su questo paragrafo

Per realizzare questo esempio inseriamo il nostro livello e all’interno aggiungiamo il tag span che rappresenta il punto dove far apparire il nostro testo.

Banner pubblicitario

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

Dopo aggiungiamo la libreria jQuery e infine il nostro semplicissimo script che fa uso anche del metodo text.

<script type="text/javascript">
$(document).ready(function(){
    $("#livello").hover(
        function(){
            $("#livello span").text("Coding Creativo");
            },
        function(){
            $("#livello span").text("Blog sul coding");
    });
});
</script>

Chiaramente questi sono solo dei semplici esempi di utilizzo del metodo jQuery hover().

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

Lezione successiva: jQuery fadeIn()