如何在某元素触发mouseover时，正确触发另一指定元素的mouseover事件

问题原因 #

• jQuery 的 mouseover() 方法仅能触发通过 JS 绑定到元素上的自定义 mouseover 事件回调，无法触发浏览器原生的默认 hover 行为。你看到的左下角链接预览是浏览器原生的交互逻辑，出于安全和交互一致性限制，仅会在用户真实鼠标指针移动到可见的 <a> 元素上时触发，无法通过 JS 模拟触发。
• 你触发事件时才刚把 <a> 元素从 display: none 状态改为显示，元素刚完成渲染，就算支持模拟事件也无法正常触发预览逻辑。

可行解决方案 #

方案1：利用布局重合触发原生交互（最推荐） #

将锚点元素预先定位到和按钮完全重合的位置，设置为透明且层级低于按钮，鼠标移动到按钮上时实际也覆盖了锚点区域，自然就能触发浏览器的原生链接预览：

a#anchorelem {
  position: absolute;
  /* 调整数值和按钮的位置、宽高完全匹配 */
  left: 0;
  top: 0;
  width: 80px;
  height: 32px;
  opacity: 0;
  z-index: 0;
}
button.pdfbutton {
  position: relative;
  z-index: 1;
}

对应JS可以简化，不需要手动触发mouseover：

$(document).ready(function() {  
  $("button.pdfbutton").mouseover(function(e) {
    $("#anchorelem").show();
    // 移除 $("#anchorelem").mouseover() 代码即可
  });
});

方案2：自定义模拟预览提示 #

如果你不需要依赖浏览器原生的预览样式，也可以自己写一个固定在左下角的提示组件，鼠标移入按钮时显示锚点的href属性值，模拟预览效果。

注意：不要尝试通过JS模拟用户交互触发浏览器原生的UI类默认行为，这类行为绝大多数都被浏览器限制仅能由用户真实操作触发，避免恶意脚本伪造交互欺骗用户。

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