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

Question

.btngo:hover{
    bottom:3px;
}

btngo 当指针结束时上升 3px，但如果指针刚好在 btngo 的边缘，它开始闪烁，即上下非常快。

有什么办法可以避免这种情况吗？

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

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