悬停图像时图像文本改变颜色答案

【问题标题】：Image-text change color when hover an image悬停图像时图像文本改变颜色
【发布时间】：2021-05-29 16:47:41
【问题描述】：

我有一张图片和一些文字。我想要的是当悬停图像时，图像将具有不透明度并且文本的颜色会发生变化。我的问题是当图像有不透明度时，文本也有不透明度，所以我看不到文本。我该如何解决这个问题？ 注意：在这种情况下，由于某些问题，我使用图像而不是背景图像，所以请帮我用图像解决这个问题。非常感谢！

这张图正是我想要的：

这是我的代码

.categories {
  height: 450px;
  position: relative;
  width: 256px;
  cursor: pointer;
  color: white;
}

.categories:hover {
  opacity: 35%;
  color: black;
}

.categories__text {
  font-size: 2.5rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  width: 50%;
  line-height: 50px;
}

<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>

【问题讨论】：

标签： html css image hover

【解决方案1】：

你必须把图片和文字的样式分开：

.categories {
  height: 450px;
  position: relative;
  width: 256px;
  cursor: pointer;
  color: white;
}

.categories:hover {
  color: black;
}

.categories:hover img {
  opacity: 35%;
}

.categories__text {
  font-size: 2.5rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  width: 50%;
  line-height: 50px;
}

<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>

【讨论】：

谢谢。这正是我想要的。