onHover
Category Sensors
Tracks whether the given element is hovered or not.
You can also pass a callback that is called when the element is being hovered.
Demo
Usage
<script>
import { onHover } from '@sv-use/core';
let el = $state();
const isHovering = onHover(() => el, () => {
console.log("element is hovered");
});
</script>
<div bind:this={el}>hover me</div>Type definitions
import type { MaybeGetter } from '../../__internal__/types.js';
type OnHoverOptions = {
/**
* A delay before triggering the callback.
* @default undefined
*/
delay?: number;
/**
* Whether to use `mouseover` and `mouseout` events or not.
*
* If `false`, uses `mouseenter` and `mouseleave` events.
* @default false
*/
dirty?: boolean;
onLeave?(event: MouseEvent): void;
};
type OnHoverReturn = {
readonly current: boolean;
};
/**
* Tracks whether the given element is hovered or not.
* @param element The element on which to detect the hover.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/sensors/on-hover
*/
export declare function onHover(element: MaybeGetter<HTMLElement | null | undefined>, options?: OnHoverOptions): OnHoverReturn;
/**
* Tracks whether the given element is hovered or not and runs a callback if `true`.
* @param element The element on which to detect the hover.
* @param callback The callback to run if the element is hovered.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/sensors/on-hover
*/
export declare function onHover(element: MaybeGetter<HTMLElement | null | undefined>, callback: (event: MouseEvent) => void, options?: OnHoverOptions): OnHoverReturn;
export {};