Question

.btngo:hover{
    bottom:3px;
}

当指针结束时，

btngo会升至3px，但如果指针位于btngo的边缘，它会开始闪烁，即上下快速上升。

有没有办法阻止这种情况？

在3px内指针为btngo之前，不应该开始此效果。

Answer 1

这是因为一旦悬停生效并且元素移动，您就不再悬停，因此悬停不再适用...并且它会循环播放。

一个解决方案是通过给指针悬停一些东西来维持悬停，而指针显然不再在元素上。

这可以通过位于元素底部的伪元素来实现（因为这个抖动只是从下面悬停时的问题）...并扩展伪的高度父母悬停时的元素。

div {
  width:100px;
  height:100px;
  position: relative;
  border:1px solid red;
  margin:2em auto;
}

div::before {
  content:"";
  position: absolute;
  width:100%;
  height:3px; /* your proposed bottom position value change */
  top:100%;
  background:transparent;
}

div:hover {
 bottom:3px; 
}

div:hover::before {
  height:6px; /* position value plus height */
}

<div></div>

没有额外的HTML，纯CSS解决方案。

Answer 2

解决方案是在应用悬停效果的位置创建一个容器，避免闪烁，因为此容器不会移动。

＆＃13;

.container {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.btngo {
  width: 200px;
  height: 100px;
  border: 1px solid;
  position: relative;
}

.container:hover .btngo {
  bottom: 3px;
}

＆＃13;

<div class="container">
  <div class="btngo">
    text
  </div>
</div>

＆＃13;

在指针在对象内部为3px之前阻止悬停效果

2 个答案: