css鼠标事件hover详解（教你如何调试hover事件）

1、前言

最近在使用一个前端表格时，发现它的选中行高亮太不明显了，准备修改一下对应样式：

但是，如果打开开发者工具调试样式，发现又没办法触发Hover事件，找不到具体的样式。

怎么办呢？

2、思路

如果能为Hover事件处理代码加上断点，运行到断点时中断就好了。

但这显然是个悖论，如果我们都能手工定位Hover事件代码了，还需要断点啥事。

不过，虽然我们没法手工打断点，但是JavaScript确实有一个帮我们自动打断点的帮手，debugger 语句:

debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数。

使用 debugger 语句类似于在代码中设置断点。

通常，你可以通过按下 F12 开启调试工具， 并在调试菜单中选择 "Console" 。

注意：如果调试工具不可用，则调试语句将无法工作。

3、实现

现在的关键是，怎么在Hover事件中执行debugger语句？

实现很简单，打开开发者工具，在控制台中编写以下内容：

setTimeout(() => {debugger;}, 3000)

然后将鼠标悬停到需要的位置，直到中断即可：

4、结论

其实，我们是利用了JavaScript是单线程的这一特点。

使用setTimeout激活了调试工具，它将阻止浏览器执行其它函数，包括对DOM进行更新，相当于中断了Hover事件。