CSS 将鼠标悬停在另一个元素之上的元素上时，悬停不透明度过渡会闪烁

Question

我有一个专辑封面，上面还有一个播放按钮。

当用户将鼠标悬停在专辑封面上时，不透明度会发生变化以使图像变亮。同样，当鼠标悬停在封面上时，如果用户随后将鼠标悬停在播放按钮上，则封面不透明度应保持其更改后的状态。

问题是因为我对不透明度有过渡效果，当在封面和播放按钮上来回悬停时，不透明度会闪烁。

我创建了一个 fiddle 来显示这个问题。

我怎样才能让最初悬停在专辑封面上时不透明度发生变化，但是当悬停在播放按钮上时，不透明度只是保持不变而没有重新过渡，导致它闪烁？

.play-button-container img:hover,
.play-button:hover + .image {
    opacity: .6;
}

.play-button-container img {
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.play-button {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 30px;
    color: #fff;
    z-index: 1000;
    background-color: red;
}

<div class="image-container">
  <div class="play-button-container">
  
    <div class="play-button">
      PLAY
    </div>
    
    <div class="image">
      <img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
    </div>
    
  </div>
</div>

https://jsfiddle.net/659z2ndx/1/

Answer 1

当您将鼠标悬停在播放按钮上时，您可以使用 class image 更改 div 的不透明度。这就是导致闪烁的原因。

你应该做的是改变 img

的不透明度

.play-button-container img:hover,
.play-button:hover + .image > img {
   opacity: .6;
}

.play-button-container img {
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.play-button {
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 30px;
    color: #fff;
    z-index: 1000;
    background-color: red;
}

<div class="image-container">
  <div class="play-button-container">
  
    <div class="play-button">
      PLAY
    </div>
    
    <div class="image">
      <img src="http://papers.co/wallpaper/papers.co-am19-tycho-art-music-album-cover-illust-simple-white-40-wallpaper.jpg" width="350">
    </div>
    
  </div>
</div>

CSS 将鼠标悬停在另一个元素之上的元素上时，悬停不透明度过渡会闪烁

CSS Hover Opacity Transition flicker when hovering over element that is on top of another element

css

opacity

css-transitions