chrome devtools elements里面找不到hover样式的解决方法

小白初学前端，不知道某个网站鼠标移到图标上面的时候显示，移开就不显示在css里面是怎么实现的。心里猜测了一下是hover属性。但是打开开发人员工具发现没有： 找到了这个帖子， https://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools

发现勾选hover就可以显示了：

需要注意的是由于这里的css类选择器是

1
2
3
4

.user-panel .avatar:hover .editor-avatar {
    opacity: 1;
    visibility: visible;
}

所以要选择avatar的子元素.editor-avatar才能在开发人员工具的elements Tab里面找到hover样式的定义。