CSS 仅在垂直鼠标弹起时悬停抖动

Question

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

我有一个简单的播放按钮和半透明 div 悬停在放置在图像上的块级别 link 上时的过渡。

问题是在图像上垂直移动鼠标时 divs 抖动。

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

垂直平行移动光标到 <span class="play">
并水平移动鼠标穿过 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>

CSS 仅在垂直鼠标弹起时悬停抖动

CSS hover jitter only on vertical mouseup

html

css

transition

hover