如何在检查器中选中hover元素及重叠元素？附CSS调试实例

一、浏览器检查器实用操作技巧 #

1. 选中hover状态的元素 #

• 打开开发者工具（快捷键F12或Ctrl+Shift+I）
• 在「元素」面板找到目标元素的代码行，右键点击 → 选择「强制状态」→ 勾选:hover；或者点击面板顶部的「:hov」按钮，勾选:hover，就能固定元素的hover状态，方便调试样式
• 也可以先选中元素，在右侧「样式」面板顶部点击「:hov」，勾选:hover激活状态

2. 选中被上层元素遮挡的下层元素 #

• 直接在「元素」面板的HTML结构树里找到下层元素的代码，点击代码行即可选中
• 使用左上角的「选择元素」工具，按住Ctrl（Windows）/Cmd（Mac）键点击重叠区域，会循环切换选中的元素，直到选中目标下层元素
• 通过「元素」面板的搜索框，输入目标元素的类名、id或标签名，定位到代码后选中

二、禁用课程卡片hover黑色效果的修复方案 #

你之前写的CSS代码无效，是因为选择器写法错误，以下是正确的解决方法：

正确的CSS代码（隐藏figcaption） #

如果你需要完全隐藏figcaption内容，替换成下面的代码：

.coursestyle2 figcaption {
  display: none !important;
}

仅移除hover黑色背景（保留figcaption内容） #

如果只是想去掉hover时的黑色遮罩效果，不用隐藏整个figcaption，可以用这段代码：

.coursestyle2:hover figcaption {
  background-color: transparent !important;
  opacity: 1 !important; /* 根据实际样式调整，比如原hover有透明度变化的话 */
}

原代码无效的原因 #

原选择器.coursestyle2.figcaption是匹配同时拥有coursestyle2和figcaption类的元素，但实际DOM结构是figure.coursestyle2内部包含figcaption标签，所以需要用后代选择器（类与标签之间加空格）来选中子元素。如果原有样式优先级更高，添加!important可以强制覆盖原有规则。

内容的提问来源于stack exchange，提问作者Majid