CSS悬停抖动仅在垂直鼠标上

Question

我已经咨询过这些类似的问题，1、2、3、4，但找不到我的问题的解决方案。

当悬停在放置在图像上的块级链接上时，我有一个简单的播放按钮和半透明的 div 转换。

问题是当鼠标在图像上垂直移动时，div会抖动。

这种行为有两个例外（在这种情况下，transition 和 div 行为运行顺利）：

1. 垂直和平行移动光标到 <span class="play">
2. 并在 div 上水平移动鼠标。

/*------- Media Play Button -------*/

.vThumb {
  position: relative;
  width: 100%;
  height: auto;
  font-size: 0;
}
.vThumb img {
  position: relative;
  width: 100%;
  display: block;
  z-index: -1;
  opacity: .5;
}
.vThumb a {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
  opacity: 0;
}
.vThumb a:hover .play {
  position: relative;
  font-size: 14vw;
  color: #f00;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  opacity: .95;
  border: none;
  display: block;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  opacity: .3;
  z-index: 1000;
  display: inline-block;
  transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  -webkit-transition: opacity .15s ease-in-out;
}
/*------- End Media Play Button -------*/

<div class="vThumb">

  <a href="#">
    <span class="play">►</span>
  </a>

  <div class="vOverlay">
    &nbsp;
  </div>

  <img src="http://i.imgur.com/wZzgmVt.jpg">

</div>

与上面提到的类似问题不同，这里没有改变大小，并且所有浏览器都会出现此问题。我做错了什么？

Answer 1

您看到闪烁的原因是选择器.vThumb a:hover ~ .vOverlay。

当您将鼠标悬停在前一个 a 元素上时，您只会对 .vOverlay 元素应用样式。当.vOverlay 元素出现时，它位于a 元素上方（这意味着您不再将鼠标悬停在a 元素上），导致它消失并再次重复。

您也可以通过在将鼠标悬停在 .vOverlay 上时应用样式来轻松防止这种情况发生（而不是仅在悬停在 a 元素上时应用它）。

换句话说，您需要以下内容：

.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
    /* ... */
}

但是，这将导致播放按钮不可见（因为您也不再将鼠标悬停在 a 元素上）。

您可以通过将选择器 .vThumb a:hover .play 更改为 .vThumb:hover .play 来解决此问题。

更新示例：

.vThumb {
  position: relative;
  width: 100%;
  height: auto;
  font-size: 0;
}
.vThumb img {
  position: relative;
  width: 100%;
  display: block;
  z-index: -1;
  opacity: .5;
}
.vThumb a {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
  opacity: 0;
}
.vThumb:hover .play {
  position: relative;
  font-size: 14vw;
  color: #f00;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  opacity: .95;
  border: none;
  display: block;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  opacity: .3;
  z-index: 1000;
  display: inline-block;
  transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  -webkit-transition: opacity .15s ease-in-out;
}

<div class="vThumb">
  <a href="#">
    <span class="play">►</span>
  </a>
  <div class="vOverlay"></div>
  <img src="http://i.imgur.com/wZzgmVt.jpg">
</div>