鼠标悬停时会触发哪些 DOM 事件，可以模拟它们吗？答案

【问题标题】：Which DOM events are triggered on mouse hover and can they be emulated?鼠标悬停时会触发哪些 DOM 事件，可以模拟它们吗？
【发布时间】：2016-06-27 16:52:35
【问题描述】：

在http://themeforest.net/ 网站上，当鼠标悬停在菜单项（例如 HTML、营销、CMS）上时，会激活一个类别下拉列表。但是，我似乎无法中断附加到它的任何 DOM 事件（使用 Firefox 调试器检查）。预期的事件侦听器类似于

上的鼠标悬停。

我想知道的是它附加了哪些事件（或者这个动画是如何被触发的），你是如何找到这些信息的，以及这些事件是否可以用 $(el).trigger() 或el.createEvent()

提前致谢。

【问题讨论】：

该菜单仅使用 CSS 创建。如果您使用 DOM 检查器并且对于父 li 上的 :hover 状态，您将看到子 ul 变得可见。
非常感谢罗里。说得通。有什么方法可以检测/模拟这个吗？即是否可以将侦听器置于 :hover 状态并进行设置？
您不能直接监听 CSS 事件，但是 mouseenter DOM 事件大致等效。

标签： javascript jquery dom event-handling mouseevent

【解决方案1】：

它不需要是显示子菜单的 javascript，也可以使用伪类 ":hover" 在纯 css 中完成。

我想这就是它在此页面上的工作方式，因为我看不到 DOM 中的任何更改（例如添加的类，更改的内联样式）。可以这样做：

div ul {
    display: none;
}

div:hover ul {
    display: block;
}

有了这个 css，一旦 div 悬停，就会显示 div 内的 ul。

无论如何，关于您的问题：“悬停”并没有真正触发自己的事件（据我所知），它更像是“mouseenter”和“mouseleave”的组合。

希望这会有所帮助。

编辑：我检查了页面上的 css 来证明我的假设，以下 css 规则适用于 menu-point-li：

.header-categories__links-item:hover>.header-categories__links-dropdown    
{
    display: block;
}

【讨论】：