安卓Windows模拟器中如何用elementFromPoint实现元素hover效果？

JS本身没有现成的element.hover()方法，得手动触发hover对应的样式或事件，给你两种实用方案：

方案一：用CSS类模拟hover效果 #

如果你的元素hover样式是写在CSS类里的（或者能改成类的形式），直接操作类名就行：

// pos.x and pos.y are the co-ordinate of the cursor
canvas.style.display = "none";
let element = document.elementFromPoint(pos.x, pos.y);
canvas.style.display = "block";

// 先清除之前所有元素的hover类，避免多个元素同时显示hover状态
document.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
// 给当前命中的元素添加hover类
if (element) {
  element.classList.add('hover');
}

对应的CSS要把原来的:hover选择器和类选择器结合：

/* 保持原生hover支持，同时兼容手动添加的类 */
.target-element:hover, .target-element.hover {
  background-color: #你的hover背景色;
}

方案二：手动派发鼠标事件 #

如果元素的hover效果依赖mouseover/mouseout事件（比如绑定了自定义处理函数），可以直接派发这些事件来触发状态：

// 全局变量记录上一个hover的元素，用来清除旧状态
let lastHoverElement = null;

// pos.x and pos.y are the co-ordinate of the cursor
canvas.style.display = "none";
let element = document.elementFromPoint(pos.x, pos.y);
canvas.style.display = "block";

if (element && element !== lastHoverElement) {
  // 给新元素触发mouseover事件，激活hover状态
  element.dispatchEvent(new MouseEvent('mouseover', {
    bubbles: true,
    cancelable: true,
    view: window
  }));
  
  // 给旧元素触发mouseout事件，取消hover状态
  if (lastHoverElement) {
    lastHoverElement.dispatchEvent(new MouseEvent('mouseout', {
      bubbles: true,
      cancelable: true,
      view: window
    }));
  }
  
  lastHoverElement = element;
}

这种方法既能触发原生的:hover样式，也能触发你绑定的hover相关事件逻辑。

几点注意 #

• 你的代码里先隐藏canvas再获取元素是对的，不然elementFromPoint会选中canvas本身。
• 一定要跟踪上一个hover元素，不然移动光标后旧元素的hover状态不会消失。
• 如果遇到元素选不中的情况，检查下目标元素的pointer-events属性，别设成none了。

内容的提问来源于stack exchange，提问作者Saneesh