如何实现鼠标悬停图片时仅修改图片透明度并改变文本颜色（避免文本继承透明度）

你遇到的核心问题是opacity属性会被子元素继承，所以给父容器.categories设置opacity时，里面的文本也会跟着变透明。既然必须用<img>标签，我们可以把透明度单独作用在图片上，而不是整个容器，这样文本就不会受影响了。

下面是修改后的完整代码：

<div class="categories">
  <div class="categories__child">
    <img alt="img" src="https://www.petcity.vn/media/news/923_gia_mua_ban_cho_phoc_soc_thukieng_12.jpg" />
  </div>
  <div class="categories__text">HERE IS THE TEXT</div>
</div>

<style>
.categories {
  height: 450px;
  position: relative;
  width: 256px;
  cursor: pointer;
  color: white;
}
/* 让图片容器铺满父元素，避免图片超出 */
.categories__child {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 设置图片铺满容器，保持比例不变形 */
.categories__child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 默认不透明，过渡动画让效果更平滑 */
  transition: opacity 0.3s ease;
}
/* 悬停时只改变图片的透明度 */
.categories:hover .categories__child img {
  opacity: 0.35;
}
/* 悬停时改变文本颜色 */
.categories:hover .categories__text {
  color: black;
}
.categories__text {
  font-size: 2.5rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  width: 50%;
  line-height: 50px;
  /* 确保文本在图片上方 */
  z-index: 1;
  /* 文本颜色也可以加过渡动画 */
  transition: color 0.3s ease;
}
</style>

关键改动说明： #

• 移除了.categories:hover中的opacity设置，转而给<img>单独设置opacity，这样只有图片会变半透明，文本不受影响。
• 给图片容器.categories__child和<img>添加了样式，确保图片能铺满.categories容器且不变形（用object-fit: cover）。
• 给图片和文本添加了transition属性，让悬停效果更平滑自然。
• 给.categories__text设置了z-index:1，确保文本始终显示在图片上方（避免被图片遮挡）。

这样就能实现你想要的效果：鼠标悬停时图片半透明，文本颜色改变，同时文本保持清晰不透明。

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