> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/6-events/hover-event-methode-met-een-dubbele-functie.md).

# 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.

{% hint style="success" %}
★ Open **events/hover.html** en test het resultaat in een browser.
{% endhint %}

```javascript
$(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.

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAOYishU_P13_ktW8jA%2F-L9sGdqQ-xL32_FBglw2%2Fhover.png?generation=1524068459105815\&alt=media)