ElementHover

Reactive tracking of hover state on an element. Detects when the mouse enters or leaves an element.

Loading demo...

Usage

import { Component, viewChild, ElementRef } from '@angular/core';
import { elementHover } from '@signality/core';

@Component({
  template: `
    <div #box [class.hovered]="hovered()">
      {{ hovered() ? 'Hovering!' : 'Hover me' }}
    </div>
  `,
})
export class HoverDemo {
  readonly box = viewChild<ElementRef>('box');
  readonly hovered = elementHover(this.box); 
}

Parameters

Parameter	Type	Description
target	MaybeElementSignal<HTMLElement>	Target element to track
options	ElementHoverOptions	Optional configuration (see Options below)

Options

The ElementHoverOptions extends CreateSignalOptions<boolean> and WithInjector:

Option	Type	Description
equal	ValueEqualityFn<boolean>	Custom equality function (see more)
debugName	string	Debug name for the signal (development only)
injector	Injector	Optional injector for DI context

Return Value

Returns a Signal<boolean> containing true when the element is being hovered, false otherwise.

SSR Compatibility

On the server, the signal initializes with false.

Note: On mobile devices, the signal also initializes with false since hover state is not available on touch devices.

Type Definitions

type ElementHoverOptions = CreateSignalOptions<boolean> & WithInjector;

function elementHover(
  target: MaybeElementSignal<HTMLElement>,
  options?: ElementHoverOptions
): Signal<boolean>;

Related

• ElementFocus — Track focus state instead of hover
• MousePosition — Track mouse position

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousElementFocusWithinNextElementSize