css - 悬停时更改带有文本的图像亮度

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>