用悬停文本改变图像亮度

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

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

​

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

​

Answer 2

可以添加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>

​