---
id: api/commands/hover
title: hover | Cypress Documentation
description: 'Cypress does not have a cy.hover() command: See common workarounds'
section: api
source_path: docs/api/commands/hover.mdx
version: 524ff5211e60b5d53e55d6ad976d83966f66e7cd
updated_at: '2026-04-30T14:20:05.396Z'
---
# hover

Cypress does not have a **cy.hover()** command. See [Issue #10](https://github.com/cypress-io/cypress/issues/10).

If `cy.hover()` is used, an error will display and redirect you to this page.

## Workarounds

Sometimes an element has specific logic on hover and you _do_ need to "hover" in Cypress. Maybe the element doesn't even display to be clickable until you hover over another element.

Oftentimes you can use [`.trigger()`](/llm/markdown/api/commands/trigger.md), [`.invoke()`](/llm/markdown/api/commands/invoke.md) or [`cy.wrap()`](/llm/markdown/api/commands/wrap.md) to show the element before you perform the action.

[Check out our example recipe on testing hover and working with hidden elements](/llm/markdown/app/references/recipes.md#Testing-the-DOM). Also take a look at the [cypress-real-events](https://github.com/dmtrKovalenko/cypress-real-events) plugin that provides native events like hover and swipe in Chromium browsers.

### Trigger

If the hover behavior depends on a JavaScript event like `mouseover`, you can trigger the event to achieve that behavior.

Using `.trigger()` will only affect events in JavaScript and will not trigger any effects in CSS.

As a workaround, check out the [recipe leveraging Chrome remote debugging](/llm/markdown/app/references/recipes.md#Fundamentals) to set pseudo classes like `hover`.

#### Simulating `mouseover` event to get popover to display

```
cy.get('.menu-item').trigger('mouseover')cy.get('.popover').should('be.visible')
```

### Invoke

#### Example of showing an element in order to perform action

```
cy.get('.hidden').invoke('show').click()
```

### Force click

You can also force the action to be performed on the element regardless of whether the element is visible or not.

#### Example of clicking on a hidden element

```
cy.get('.hidden').click({ force: true })
```

#### Example of checking a hidden element

```
cy.get('.checkbox').check({ force: true })
```

### Add as a custom command

Although Cypress does not have a built-in `cy.hover()` command, you can create your own custom command using [`Cypress.Commands.add()`](/llm/markdown/api/cypress-api/custom-commands.md).

```
Cypress.Commands.add('hover', (...args) => {})
```

Note that while `Cypress.Commands.add()` is the recommended way to define a custom `cy.hover()` command, [`Cypress.Commands.overwrite()`](/llm/markdown/api/cypress-api/custom-commands.md#Overwrite-Existing-Commands) will still work.

```
Cypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})
```

## See also

We show how to use the `.trigger` command and the [cypress-real-events](https://github.com/dmtrKovalenko/cypress-real-events) plugin to test elements with hover states in the video [Cypress hover example](https://www.youtube.com/watch?v=TZjphtLrRT4), with the source code available in the [bahmutov/cy-hover-example](https://github.com/bahmutov/cy-hover-example) repo.

*   [`.invoke()`](/llm/markdown/api/commands/invoke.md)
*   [`.trigger()`](/llm/markdown/api/commands/trigger.md)
*   [`cy.wrap()`](/llm/markdown/api/commands/wrap.md)
*   [`Cypress.Commands.overwrite()`](/llm/markdown/api/cypress-api/custom-commands.md#Overwrite-Existing-Commands)
*   [Recipe: Hover and Hidden Elements](/llm/markdown/app/references/recipes.md#Testing-the-DOM)
*   blog post [Hover in Cypress](https://filiphric.com/hover-in-cypress) by Filip Hric