Gli eventi del mouse in jQuery

Gli eventi del mouse rappresentano l'interazione con l'uso del mouse su degli elementi.

Sintassi degli eventi del mouse in jQuery

.mouseenter() // quando il mouse entra dall'area selezionata
.mouseleave() // quando il mouse esce dall'area selezionata
.hover() // quando il mouse entra ed esce dall'area selezionata
.mousedown() // quando il mouse clicca sull'area selezionata
.mouseup()  //dopo che il mouse ha cliccato sull'area selezionata

Esempio sugli eventi del mouse in jQuery

Codice della Lezione : Eventi del Mouse in jQuery

// inizializzazione jQuery
$(document).ready(function(){
    // Eventi: modi che l'utente ha per interagire con una pagina web.

    // mouseenter (quando il mouse entra dall'area selezionata)
    $('#txtID1').mouseenter(function(){
        $(this).css('background-color','blue');
    });
    // mouseleave (quando il mouse esce dall'area selezionata)
    $('#txtID2').mouseleave(function(){
        $(this).css('background-color','gray');
    });
    // hover (quando il mouse entra ed esce dall'area selezionata)
    $('#txtID3').hover(function(){
        $(this).css('background-color','chartreuse');
    },function(){
        $(this).css('background-color','darkturquoise');
    });
    // mousedown (quando il mouse clicca sull'area selezionata)
    $('#txtID4').mousedown(function(){
        $(this).css('background-color','aquamarine');
    });
    // mouseup (dopo che il mouse ha cliccato sull'area selezionata)
    $('#txtID5').mouseup(function(){
        $(this).css('background-color','burlywood');
    });
});