将鼠标悬停在另一个元素之上的元素上时，CSS Hover Opacity Transition 会闪烁

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

当您将鼠标悬停在播放按钮上时，您可以使用 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>