如何用JavaScript模拟mouseover事件保持class为_nb8H _BdWj的span常显

架构老林

2026-9-26

解决方案

实现原理

该菜单的显隐由span._nb8H._BdWj元素监听的鼠标事件控制：鼠标移入时触发mouseenter/mouseover事件展示菜单，鼠标移出时触发mouseleave/mouseout事件隐藏菜单。我们可以通过主动派发移入事件触发展开，再拦截移出事件阻止菜单自动收起。

完整实现代码

// 1. 获取目标触发元素
const triggerSpan = document.querySelector('span._nb8H._BdWj');

if (!triggerSpan) {
  console.error('未找到目标span，请检查class是否匹配');
} else {
  // 2. 构造并派发鼠标移入事件，触发菜单展开
  const enterEvent = new MouseEvent('mouseenter', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  triggerSpan.dispatchEvent(enterEvent);

  // 3. 拦截所有移出事件，阻止菜单收起
  const blockOutEvent = (e) => e.stopImmediatePropagation();
  triggerSpan.addEventListener('mouseleave', blockOutEvent, true);
  triggerSpan.addEventListener('mouseout', blockOutEvent, true);

  // 4. 模拟点击菜单选项（替换为你实际需要点击的菜单元素选择器即可）
  // document.querySelector('.menu-item-target').click();
}

备用方案（事件逻辑失效时使用）

如果网站做了自定义事件拦截导致上述方案无效，可以直接强制修改菜单的显示样式，优先级最高：

先手动触发一次菜单展开，在F12元素面板中找到菜单元素的选择器（比如class为panel-menu）
执行下述代码强制展示菜单：

const menuPanel = document.querySelector('.panel-menu'); // 替换为你实际的菜单选择器
if (menuPanel) {
  menuPanel.style.cssText = `
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  `;
}