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à.
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.
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
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
Alcuni esempi con javascript alert