Question

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

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

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

此行为有两个例外（在这种情况下，转换和div行为平稳运行）：

垂直移动光标并平行移动 routes.rb
并在div上水平移动鼠标。

＆＃13;

<span class="play">

＆＃13;

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

＆＃13;

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

Answer 1

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

当您将鼠标悬停在之前的.vOverlay元素上时，您只对a元素应用样式。当.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仅在垂直鼠标上悬停抖动

1 个答案: