> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/events/.hover.md).

# .hover()

Adds hover event listeners to an element.

### hover(onEnter, onLeave)

#### Parameters:

* `onEnter`: Function to execute when hovering over the element.
* `onLeave`: Function to execute when leaving the element.

#### Usage:

```javascript
$('#button').hover(
    () => console.log('Hovered in!'),
    () => console.log('Hovered out!')
);
```

### Use cases

Use `.hover()` to:

* Show and hide a tooltip.
* Highlight an interactive card.
* Preview controls before a user clicks them.

### More examples

Show a tooltip while a user hovers over a help icon:

```javascript
$('#help').hover(
  () => $('#tip').text('Use Enter to submit.').show(),
  () => $('#tip').hide()
);
```

Highlight a product card on hover:

```javascript
$('.product-card*').hover(
  function() { this.addClass('is-hovered'); },
  function() { this.removeClass('is-hovered'); }
);
```

{% hint style="info" %}
Do not put essential actions or information behind hover alone. Touch and keyboard users may not trigger it.
{% endhint %}