Question

我有一个按钮，悬停时会上升 10px。问题是，当按钮过渡或过渡 10px 时，如果光标刚好位于按钮下方，它会抽搐。

.talk-to-us {
    padding: 10px; 
    height: 43px;
    width: 148px;
    background-color: #00cdac;
    position: relative;
    transition: top ease .40s;
    top: 0;
}

.talk-to-us:hover {
    top: -10px;
}

.link {
    color: white;
    font-size: 14px; 
    padding: 10px;
}

<button class="talk-to-us">
  <a class="link" href="#">TALK TO US!</a>
</button>

如何仅通过 CSS 防止这种行为？

Answer 1

一种可能性是添加一个向下延伸足够远的伪元素以考虑向上移动，因此鼠标保持在目标区域内。使用透明背景，您将看不到它，但它仍会捕获鼠标事件。

此处唯一的变化是添加了 ::after 选择器/规则：

.talk-to-us {
    padding: 10px; 
    height: 43px;
    width: 148px;
    background-color: #00cdac;
    position: relative;
    transition: top ease .40s;
    top: 0;
}

.talk-to-us:hover {
    top: -10px;
}

.talk-to-us:hover::after {
  content: '';
  position: absolute;
  height: 20px;
  background: transparent;
  left: 0;
  right: 0;
  top: 100%;
}


.link {
    color: white;
    font-size: 14px; 
    padding: 10px;
}

<button class="talk-to-us">
  <a class="link" href="#">TALK TO US!</a>
</button>

防止悬停时按钮抽搐

1 个答案: