In questo post andremo velocamente a vedere come si possono gestire gli eventi generati dal passaggio del mouse su un oggetto tramite jQuery.

Per prima cosa possiamo andare a vedere questo esempio:

http://demo.studio-88.it/eventi-mouse-jquery.html

possiamo vedere che il testo contenuto nel box cambia se ci andiamo sopra col mouse e ricambia quando usciamo dal box stesso, dicendoci se siamo sopra o no.

Ora andiamo ad analizzare i vari pezzi di codice, trattandosi di jQuery per prima cosa dobbiamo includere lo script necessario, questa volta lo prenderemo direttamente da google, che lo rende disponibile per gli utenti che ne hanno bisogono, quindi dentro l’head della nostra pagina scriveremo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Per rendere la viusalizzazione del nostro box un po’ più carina andiamo a definire una regola css per il box:

#box{
	border:7px solid #030;
	padding:5px;
	background-color:#060;
	width:400px;
	height:50px;
	color:#FFF;
}

I migliori libri per sapere tutto su jQuery

	JQuery Guida completa copertina flessibile
	jQuery: Corso di programmazione per principianti Copertina
	JavaScript & JQuery. Sviluppare interfacce web interattive.

Ora agginugiamo all’interno dal tag body il box definito, come si capisce dal foglio di stile il box dovrà avere l’attributo id=”box”:

<div id="box">Fuori</div>

Ora con poche righe di codice definiamo i cambiamenti che devono avvenire nella pagina:

<script>
$("#box").mouseover(function(){
	$("#box").html("Dentro");
});

$("#box").mouseout(function(){
	$("#box").html("Fuori");
});
</script>

Ora possiamo analizzare il codice.

$("#box").mouseover()

è il pezzo di codice che farà qualcosa quando si passerà sopra con il mouse all’oggetto con id box,
quello che deve fare è definito all’interno delle parentesi di mouseover, nel coso specifico stiamo esguendo il codice:

$("#box").html("Dentro");

In pratica non fa altro che sotiutuire l’html all’interno del tag con id box con la scritta Dentro.

Del tutto analogo è il codice:

$("#box").mouseout(function(){
    $("#box").html("Fuori");
});

che all’uscita del mouse dal box riscriverà al suo interno Fuori