Hover-event: methode met een dubbele functie

Sommige events worden regelmatig in combinatie gebruikt. Neem bijvoorbeeld het mouseenter-event en het mouseleave-event om een sectie te tonen en daarna weer te verbergen. Beide combinaties zijn gebundeld in een event met een dubbele uitvoerfunctie.

• hover(function(){...}, function(){...}).

De eerste functie staat voor het mouseenter-event en de tweede functie staat voor het mouseleave-event.

★ Open events/hover.html en test het resultaat in een browser.

$(function() {
    $('#div1').hover(function(e) {
        $(this).addClass('orange');
        $('#res1').text('event.type: '+ e.type);
    }, function(e) {
        $(this).removeClass('orange');
        $('#res1').text('event.type: '+ e.type);
    });
});

De eerste functie binnen de methode hover() (het mouseenter-event) voegt aan #div1 de class .orange toe. De tweede functie (het mouseleave-event) verwijdert de class .orange. Het eventtype verschijnt net boven de div-tag.