调试鼠标悬浮（hover）元素的技巧

首先有两种方式实现元素的鼠标悬浮交互：

1. css；使用伪类.foo:hover{ /* 悬浮时样式 */ }
2. js；通过监听元素的mouseenter、mouseleave事件，控制元素的样式

CSS实现的hover调试：

原理：使用 chrome devtools 提供的样式调试工具

例子：button按钮的hover样式变化。

TIP

某些元素hover伪类css写在父元素上，此时需要操作父元素。

JS实现的hover调试：

原理：通过debugger。

例子：tooltip组件的提示元素查看。

方法：

1. 打开chrome devtools的soures页面。
2. 鼠标移动的触发元素上方，hover触发后隐藏的元素显示。
3. 用快捷键(F8 或者 Ctrl + \)打断点。
4. 然后就可以选择选择元素了。

结尾：整体来说就是大家都会的东西，就是记录一下方便萌新。