javascript - 鼠标悬停时会触发哪些 DOM 事件并且可以模拟它们吗？

Question

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

上的鼠标悬停。

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

提前致谢。

Answer 1

它不需要是显示子菜单的 JavaScript，它也可以使用伪类“:hover”在纯 CSS 中完成。

我想这就是它在这个页面上的工作方式，因为我看不到 DOM 中的任何更改(例如添加的类、更改的内联样式)。可以这样完成:

div ul {
    display: none;
}

div:hover ul {
    display: block;
}

使用此 css，一旦将鼠标悬停在 div 上，就会显示 div 内的 ul。

无论如何，关于你的问题:“hover”并没有真正触发自己的事件(据我所知)，它更多的是“mouseenter”和“mouseleave”的组合。

希望这有帮助。

编辑:我检查了页面上的CSS，这证明了我的假设，有以下CSS规则适用于菜单点li:

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