{
  "doc": {
    "id": "api/commands/hover",
    "title": "hover | Cypress Documentation",
    "description": "Cypress does not have a cy.hover() command: See common workarounds",
    "section": "api",
    "source_path": "/llm/markdown/api/commands/hover.md",
    "version": "24a73f8a97175663aaffd3b016289fb2a523a4ea",
    "updated_at": "2026-05-14T20:17:33.301Z",
    "headings": [
      {
        "id": "api/commands/hover#hover",
        "text": "hover",
        "level": 1
      },
      {
        "id": "api/commands/hover#workarounds",
        "text": "Workarounds",
        "level": 2
      },
      {
        "id": "api/commands/hover#trigger",
        "text": "Trigger",
        "level": 3
      },
      {
        "id": "api/commands/hover#simulating-mouseover-event-to-get-popover-to-display",
        "text": "Simulating mouseover event to get popover to display",
        "level": 4
      },
      {
        "id": "api/commands/hover#invoke",
        "text": "Invoke",
        "level": 3
      },
      {
        "id": "api/commands/hover#example-of-showing-an-element-in-order-to-perform-action",
        "text": "Example of showing an element in order to perform action",
        "level": 4
      },
      {
        "id": "api/commands/hover#force-click",
        "text": "Force click",
        "level": 3
      },
      {
        "id": "api/commands/hover#example-of-clicking-on-a-hidden-element",
        "text": "Example of clicking on a hidden element",
        "level": 4
      },
      {
        "id": "api/commands/hover#example-of-checking-a-hidden-element",
        "text": "Example of checking a hidden element",
        "level": 4
      },
      {
        "id": "api/commands/hover#add-as-a-custom-command",
        "text": "Add as a custom command",
        "level": 3
      },
      {
        "id": "api/commands/hover#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/commands/hover#workarounds",
      "doc_id": "api/commands/hover",
      "heading": "Workarounds",
      "heading_level": 2,
      "content_markdown": "## Workarounds\n\nSometimes 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.\n\nOftentimes 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.\n\n[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.\n\n### Trigger\n\nIf the hover behavior depends on a JavaScript event like `mouseover`, you can trigger the event to achieve that behavior.\n\nUsing `.trigger()` will only affect events in JavaScript and will not trigger any effects in CSS.\n\nAs a workaround, check out the [recipe leveraging Chrome remote debugging](/llm/markdown/app/references/recipes.md#Fundamentals) to set pseudo classes like `hover`.\n\n#### Simulating `mouseover` event to get popover to display\n\n```\ncy.get('.menu-item').trigger('mouseover')cy.get('.popover').should('be.visible')\n```\n\n### Invoke\n\n#### Example of showing an element in order to perform action\n\n```\ncy.get('.hidden').invoke('show').click()\n```\n\n### Force click\n\nYou can also force the action to be performed on the element regardless of whether the element is visible or not.\n\n#### Example of clicking on a hidden element\n\n```\ncy.get('.hidden').click({ force: true })\n```\n\n#### Example of checking a hidden element\n\n```\ncy.get('.checkbox').check({ force: true })\n```\n\n### Add as a custom command\n\nAlthough 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).\n\n```\nCypress.Commands.add('hover', (...args) => {})\n```\n\nNote 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.\n\n```\nCypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})\n```\n",
      "section": "api",
      "anchors": [
        "workarounds"
      ],
      "path": "/llm/json/chunked/api/commands/hover.json",
      "token_estimate": 361
    },
    {
      "id": "api/commands/hover#trigger",
      "doc_id": "api/commands/hover",
      "heading": "Trigger",
      "heading_level": 3,
      "content_markdown": "### Trigger\n\nIf the hover behavior depends on a JavaScript event like `mouseover`, you can trigger the event to achieve that behavior.\n\nUsing `.trigger()` will only affect events in JavaScript and will not trigger any effects in CSS.\n\nAs a workaround, check out the [recipe leveraging Chrome remote debugging](/llm/markdown/app/references/recipes.md#Fundamentals) to set pseudo classes like `hover`.\n\n#### Simulating `mouseover` event to get popover to display\n\n```\ncy.get('.menu-item').trigger('mouseover')cy.get('.popover').should('be.visible')\n```\n",
      "section": "api",
      "anchors": [
        "trigger"
      ],
      "path": "/llm/json/chunked/api/commands/hover.json",
      "token_estimate": 89
    },
    {
      "id": "api/commands/hover#force-click",
      "doc_id": "api/commands/hover",
      "heading": "Force click",
      "heading_level": 3,
      "content_markdown": "### Force click\n\nYou can also force the action to be performed on the element regardless of whether the element is visible or not.\n\n#### Example of clicking on a hidden element\n\n```\ncy.get('.hidden').click({ force: true })\n```\n\n#### Example of checking a hidden element\n\n```\ncy.get('.checkbox').check({ force: true })\n```\n",
      "section": "api",
      "anchors": [
        "force-click"
      ],
      "path": "/llm/json/chunked/api/commands/hover.json",
      "token_estimate": 68
    },
    {
      "id": "api/commands/hover#add-as-a-custom-command",
      "doc_id": "api/commands/hover",
      "heading": "Add as a custom command",
      "heading_level": 3,
      "content_markdown": "### Add as a custom command\n\nAlthough 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).\n\n```\nCypress.Commands.add('hover', (...args) => {})\n```\n\nNote 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.\n\n```\nCypress.Commands.overwrite('hover', (originalFn, ...otherArgs) => {})\n```\n",
      "section": "api",
      "anchors": [
        "add-as-a-custom-command"
      ],
      "path": "/llm/json/chunked/api/commands/hover.json",
      "token_estimate": 73
    },
    {
      "id": "api/commands/hover#see-also",
      "doc_id": "api/commands/hover",
      "heading": "See also",
      "heading_level": 2,
      "content_markdown": "## See also\n\nWe 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.\n\n*   [`.invoke()`](/llm/markdown/api/commands/invoke.md)\n*   [`.trigger()`](/llm/markdown/api/commands/trigger.md)\n*   [`cy.wrap()`](/llm/markdown/api/commands/wrap.md)\n*   [`Cypress.Commands.overwrite()`](/llm/markdown/api/cypress-api/custom-commands.md#Overwrite-Existing-Commands)\n*   [Recipe: Hover and Hidden Elements](/llm/markdown/app/references/recipes.md#Testing-the-DOM)\n*   blog post [Hover in Cypress](https://filiphric.com/hover-in-cypress) by Filip Hric\n",
      "section": "api",
      "anchors": [
        "see-also"
      ],
      "path": "/llm/json/chunked/api/commands/hover.json",
      "token_estimate": 79
    }
  ]
}