使用悬停时的文字更改图像的亮度答案

【问题标题】：Change brightness on image with text on hover使用悬停时的文字更改图像的亮度
【发布时间】：2018-10-25 07:32:31
【问题描述】：

我有一些带有文字的图片。我想在悬停时更改图像的亮度，而不影响文字。

我现在的解决方案除了一个问题之外有效：当光标移到图像上时，亮度会发生变化，但如果光标随后移到图像顶部的文本上，亮度会变回来。

我怎样才能避免这种情况？如果可能的话，我正在寻找一个纯 CSS 解决方案。

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}
.image-container img {
  filter: brightness(60%);
  width: 100%;
}
.image-container img:hover {
  filter: brightness(100%);
}
.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
}

<div class="image-container">
<p><a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
<span class="image-text">Master</span><br>
</a></p>
</div>

【问题讨论】：

文本没有亮度增加

标签： css hover

【解决方案1】：

您可以添加pointer-events:none以忽略文本上的悬停事件

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}
.image-container img {
  filter: brightness(60%);
  width: 100%;
}
.image-container img:hover {
  filter: brightness(100%);
}
.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
  pointer-events:none
}

<div class="image-container">
<p><a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
<span class="image-text">Master</span><br>
</a></p>
</div>

【讨论】：

【解决方案2】：

在悬停容器而不是图像时触发更改。

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}

.image-container img {
  filter: brightness(60%);
  width: 100%;
}

.image-container:hover img {
  filter: brightness(100%);
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
}

<div class="image-container">
  <p>
    <a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
      <span class="image-text">Master</span><br>
    </a>
  </p>
</div>

【讨论】：

谢谢，成功了。