CSS hover事件不响应，悬停caption无反应如何解决

• 你写的.portfolio img:hover .caption选择器逻辑错误：该选择器的含义是匹配悬停在.portfolio内的img元素时，img内部的.caption元素，但<img>是空元素，本身无法嵌套任何子节点，因此该选择器永远无法匹配到对应元素，样式不会生效。
• 默认设置了.caption的display: none，元素处于不可见状态时本身也无法响应鼠标hover事件。

首先确认你的DOM结构符合常规的图文卡片结构：

<div class="portfolio">
  <img src="你的图片地址" alt="作品预览">
  <div class="caption">
    <h4>作品标题</h4>
    <p>作品说明</p>
  </div>
</div>

根据你的交互需求选择对应修改方案：

1. 仅悬停在图片上时显示caption，替换原有hover相关代码为：

.portfolio img:hover + .caption {
  display: block;
}

这里用相邻兄弟选择器+匹配和img平级、紧跟在img后的.caption元素。
2. （更推荐）悬停在整个.portfolio容器范围都显示caption，避免鼠标移到caption上时元素消失闪烁：

.portfolio:hover .caption {
  display: block;
}

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