如何在没有鼠标事件的情况下模拟鼠标悬停？

Question

在这个问题中，导航栏中有 7 个子菜单，我希望在加载网站时，将鼠标悬停在所有菜单上。不触发鼠标事件，只操作DOM/style，我必须用JavaScript写代码

这是子菜单之一：

<div class="submenu">
  <ul class="linkmenu">
    <li class="d-md-none">
      <div class="nav-item standalone-nav"><span><a href="/wines/_/N-n" data-nav-label="Browse all Offers"><strong>Browse all Offers</strong></a></span></div>
    </li>
    <li>
      <div class="nav-item"> <span>Type</span> <i class="arrow down"></i>
      </div>
      . . . . .
      </a>
    </li> -->
  </ul>
</div>

Answer 1

你可以使用

css: [querySelecter]:hover

示例：

.nav-item:hover { /* css code here */ }

js：鼠标悬停和鼠标离开

示例：

document.querySelecter('.nav-item').addEventListener('mouseover',()=>{ /* js */ }
document.querySelecter('.nav-item').addEventListener('mouseleave',()=>{ /* js */ }