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

【问题标题】：CSS Hover Opacity Transition flicker when hovering over element that is on top of another element将鼠标悬停在另一个元素之上的元素上时，CSS 悬停不透明度过渡闪烁
【发布时间】：2019-06-26 21:48:05
【问题描述】：

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

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

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

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

我怎样才能让它在最初将鼠标悬停在专辑封面上时，不透明度过渡，但然后将鼠标悬停在播放按钮上，不透明度保持不变而不重新过渡，导致它闪烁？

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

【问题讨论】：

“封面不透明度将保持不变”说什么？它会改变状态还是保持当前状态？或者其中之一是否表明期望的行为？请改写以增加清晰度。
“不透明度改变使图像变暗” 不，它似乎与我相反；我在这里错过了什么？
@MarkSchultheiss 在我的应用程序上，图像会变暗，因为我是这样设置的。以上只是一个例子，并不是在生产中实现的。对于造成的混乱，我深表歉意。
@MarkSchultheiss 我改写了这个问题。应该更清楚（希望如此）。

标签： css css-transitions opacity

【解决方案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>

【讨论】：