前端如何将hover状态定住？

前端如何将hover状态定住？

直接进入正题，前端实现hover一般有两种方式：

第一种是直接通过CSS伪类 :hover 实现

:hover {
    transform: scale(2);
}

这种情况用浏览器调试工具固定hover状态即可，不只是 :hover，通过调试工具可以固定住多种CSS伪元素状态。

第二种是通过JS动态的添加类或属性实现的hover效果

这种情况是无法通过上面的方式固定hover状态的，因为上面的方式只能固定CSS部分的伪元素。这种情况依然是用调试工具实现，打开调试工具，查看Elements，右键单击某一元素，可以看到

这也是浏览器的断点功能，可以监听元素子节点的变化、元素属性的变化（新增和移除属性或元素值发生变化）、监听节点被移除。而“通过JS动态的添加类或属性实现的hover效果”本质上就是改变元素的属性，所以只要找到随着hover状态的改变而发生属性跟随变化的那个元素，然后给这个元素添加attribute modifications断点，然后当元素的属性变化时便会进入断点，然后跟进断点直到hover状态出现即可。