悬停事件

悬停事件用于检测指针是否移动到目标元素上，以下为能够触发悬停的操作方式：

尝试一下

w-lang#hover-target.hover-target(key="hoverOnMe")

.hover-target
	display flex
	justify-content center
	align-items center
	max-width 150px
	max-height 70px
	width 80%
	height 80%
	border-radius 4px
	background var(--w-btn-bg)
	&[ui-hover]
		background var(--theme-a8)

import { events } from 'abm-ui';
import { $ } from 'abm-utils';

const target = $('#hover-target')!;
events.hover.on(target, (event)=>{
	console.log(event);
});

HTML 属性

当目标元素处于悬停状态时，该元素会被添加 ui-hover 属性，可用于编写 CSS 样式。

.target {
  background: white;
}
.target[ui-hover] {
  background: black;
}

接口

import { events } from 'abm-ui';

on()

events.hover.on(element, handler);

为目标元素注册悬停事件处理函数。

off()

events.hover.off(element, handler);

移除目标元素的悬停事件处理函数。

add()

events.hover.add(element);

为目标元素注册悬停事件，但不添加处理函数。

rm()

events.hover.rm(element);

取消目标元素注册的悬停事件，并移除所有对应的处理函数。

start()

events.hover.start(element);

若目标元素注册了悬停事件，则使其处于悬停状态。 若元素已注册了悬停事件，返回 true，反之返回 false。

end()

events.hover.end(element);

若目标元素注册了悬停事件，则结束其悬停状态。 若元素已注册了悬停事件，返回 true，反之返回 false。

类 UIEventHover

该类继承自 EventBase。

on() 方法中注册的处理函数 handler，在悬停事件触发时会接收到一个 UIEventHover 类型的参数。

import { UIEventHover } from 'abm-ui';

const handler = (event: UIEventHover) => {};

hover

boolean 类型的属性，表示事件触发时的悬停状态：

target

HTMLElement 类型的属性，表示悬停事件对应元素。

type

string 类型的属性，表示事件类型，悬停事件 type 恒为 hover。