在前端开发过程中,我们经常会遇到一些元素在鼠标Hover后会消失的情况。那想要调试就先要明白这种效果的实现方式。
通常有如下几种实现方式：
- css的 :hover 控制元素的 样式显示隐藏
- js的方式来控制元素的 样式显示隐藏
- js控制元素 是否渲染，这种方式失去hover效果后 元素会直接被摧毁
网上方案比较多，这里只推荐以下2种方案。
一 触发CSS的Hover效果
这种情况适用于源码是:hover实现,如果不生效就使用方法二选中触发hover效果的元素，右键-检查。在开发工具的Element-stylestab 中选择:hover面板，选中:hover选项，即可看到隐藏的dom了
我们以element 网站为例
添加:hover后便可以选中隐藏的操作项按钮进行调试了
二 JS控制的元素，禁用js
这种情况比较试用js控制的或者直接销毁元素的方式
先F12打开控制台，鼠标移动到该元素，然后按住Ctrl+Shift+p，输入 Disable JavaScript回车
以上两种方案就是比较通用且推荐的调试方法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。