feat: add option to set element class on hover

src/event/behavior/index.ts

@@ -1,4 +1,6 @@
 import './click'
+import './mouseenter'
+import './mouseleave'
 import './cut'
 import './keydown'
 import './keypress'

src/event/behavior/mouseenter.ts

@@ -0,0 +1,7 @@
+import {behavior} from './registry'
+
+behavior.mouseenter = (_, target, instance) => {
+  const className = instance.config.hoverClass
+  if (className == null) return
+  target.classList.add(className)
+}

src/event/behavior/mouseleave.ts

@@ -0,0 +1,7 @@
+import {behavior} from './registry'
+
+behavior.mouseleave = (_, target, instance) => {
+  const className = instance.config.hoverClass
+  if (className == null) return
+  target.classList.remove(className)
+}

src/options.ts

@@ -108,6 +108,17 @@ export interface Options {
    */
   skipHover?: boolean
 
+  /**
+   * The `:hover` pseudo-class cannot be applied programmatically.
+   *
+   * Instead, you can choose a CSS class name to be applied to elements when they are hovered.
+   * This requires the CSS to be written/transformed such that hover styles
+   * are applied with this custom class.
+   *
+   * @default null
+   */
+  hoverClass?: string | null
+
   /**
    * Write selected data to Clipboard API when a `cut` or `copy` is triggered.
    *

src/setup/setup.ts

@@ -29,6 +29,7 @@ const defaultOptionsDirect: Required<Options> = {
   skipAutoClose: false,
   skipClick: false,
   skipHover: false,
+  hoverClass: null,
   writeToClipboard: false,
   advanceTimers: () => Promise.resolve(),
 }

tests/setup/index.ts

@@ -1,5 +1,5 @@
-import {getSpy} from './_mockApis'
 import {getConfig} from '@testing-library/dom'
+import {getSpy} from './_mockApis'
 import userEvent from '#src'
 import {type Instance, type UserEventApi} from '#src/setup/setup'
 import {render} from '#testHelpers'