CSS:hover伪类失效：悬停door元素时d0文本不显示问题排查

你的CSS选择器.door:hover #d0逻辑错误：它试图选中door类元素内部的#d0元素，但实际HTML里，.door和#d0是同级元素（#d0在.door之后的<span class="right">容器内），所以这个选择器根本匹配不到目标元素，导致悬停功能失效。

修改CSS中的hover选择器，利用相邻兄弟选择器+定位到.door之后的.right容器，再选中内部的#d0：

.door:hover + .right #d0 {
  visibility: visible;
}

这个选择器的含义是：当鼠标悬停在.door元素上时，选中它紧挨着的下一个兄弟元素（即带有right类的span）内部的#d0元素，将其可见性设为显示。

方案1：调整HTML结构（将d0放入door容器） #

如果项目允许调整结构，把#d0的div放到.door的包裹容器内，这样你原本的选择器逻辑就能生效：

<div class="center">
  <img class="door" src="https://codehs.com/uploads/15d20f866b54dbed5365a5ea6ffc91f8">
  <div class="overlay hidden" id="d0">…huh</div>
</div>

对应的CSS保持你原来的写法即可：

.door:hover #d0 {
  visibility: visible;
}

方案2：JavaScript控制（适配复杂结构） #

如果上述CSS方案不适用，可以用JS监听hover事件手动控制显示/隐藏：

const door = document.querySelector('.door');
const d0 = document.getElementById('d0');

door.addEventListener('mouseover', () => {
  d0.classList.remove('hidden');
});

door.addEventListener('mouseout', () => {
  d0.classList.add('hidden');
});

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