jQuery mouseover() method

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.

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 *