jQuery hover()

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().


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 realizzamo 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.

<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().

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript


Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *