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

Question

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

除了一个问题，我现在可以使用的解决方案：当光标移到图像上方时，亮度会发生变化，但是如果光标移到图像上方的文本上时，亮度会变回原来。

如何避免这种情况？如果可能的话，我正在寻找纯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>

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

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