将鼠标悬停在另一个元素上方的元素上时，CSS悬停不透明度转换会闪烁

Question

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

当用户将鼠标悬停在专辑封面上时，不透明度会更改以减轻图像的亮度。同样地，悬停在盖时，如果用户然后在播放按钮悬停，盖不透明度应保持在它改变状态。

的问题是，因为我对不透明性的过渡效果，悬停来回在盖和播放按钮时的不透明度闪烁。

我创建了一个小提琴来显示问题。

我如何拥有它，以便当最初将鼠标悬停在专辑封面上时，不透明度会发生变化，但是随后将鼠标悬停在播放按钮上时，不透明度会保持不变而不会重新过渡，从而导致闪烁？

.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

当将光标悬停在播放按钮，则改变的div的不透明度与类image。那就是导致闪烁的原因。

您应该做的是更改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>