如何通过.product-container:hover控制内部p元素显示（仅HTML/CSS）

问题出在你用的选择器不对：+ p是相邻兄弟选择器，它只能选中和目标元素处于同一层级且紧挨着的元素，但你的<p>是.product-container的内部子元素，并非同级元素，所以这个选择器无法生效。

你需要用后代选择器来选中容器内部的段落，这样就能实现仅当前悬停的产品容器内的段落显示，无需给每个容器添加专属类。

完整代码示例 #

HTML结构

<div class="product-container">
  <img src="your-product-image.jpg" alt="产品图片">
  <p>产品描述内容</p>
</div>
<div class="product-container">
  <img src="another-product-image.jpg" alt="另一款产品图片">
  <p>另一款产品的描述内容</p>
</div>

CSS样式

/* 默认隐藏所有产品容器内的段落 */
.product-container p {
  display: none;
}

/* 当鼠标悬停在产品容器上时，显示其内部的段落 */
.product-container:hover p {
  display: block;
  /* 可按需添加样式优化显示，比如：
  margin-top: 10px;
  color: #333;
  */
}

如果你的<p>是.product-container的直接子元素（未嵌套在其他标签内），也可以用子选择器.product-container:hover > p，效果和后代选择器一致，但它只会选中直接子层级的<p>，定位更精准。

这样设置后，鼠标悬停在哪个.product-container上，就只会显示该容器内的段落，不会影响其他产品的内容。

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