Question

我正在尝试制作一个按钮，在悬停时，它会上升5px。

它适用于过渡。但问题是，当我将鼠标悬停在按钮的下半部分时，只要我移动鼠标（我猜它会检查：鼠标更新时悬停，但我是CSS的新手。 ..），因为按钮已经上升，它意识到它不再徘徊，所以它快速回到原位，最终闪烁。

 .btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease ;
 }

.btn:hover {
  transform: translate(0px,-5px);
  transition: transform 50ms ease ;
}

    <button class="ui button btn"> That rocks!</button>

如何防止此行为？我发现只有可能的解决方案是使用display：inline-block，但它似乎没有任何区别。

另外，我尝试过使用容器div，但它仍然会做同样的事情。

Answer 1

将按钮放入容器中，当您将鼠标悬停在容器上时，它会更改子按钮：

.container:hover .btn {
  transform: translate(0px,-5px);
}

Answer 2

如果您在容器上监控:hover，那么似乎可以正常使用容器，然后transform button。而且您只需要分别定义transition和transform。

.btn {
  display: inline-block;
  transition: transform 50ms ease;
}

div:hover .btn {
  transform: translate(0px, -5px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <button class="ui button btn"> That rocks!</button>
</div>

Answer 3

如果您在容器上设置悬停事件，它应该有效。

＆＃13;

.btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease ;
 }
div {
  transition: transform 50ms ease ;
  background: pink;
}

div:hover .btn {
  transition: transform 50ms ease ;
  transform: translate(0px,-5px);
}

＆＃13;

<div>
  <button class="ui button btn"> That rocks!</button>
</div>

＆＃13;

Answer 4

悬停时，添加具有以下样式的::after伪元素：

.btn:hover::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}

它会将注意力集中在按钮上。

<强>段：

＆＃13;

.btn {
  display:inline-block;
  transform: translate(0px,0px);
  transition: transform 50ms ease;
 }
 
.btn:hover::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}

.btn:hover {
  transform: translate(0px,-5px);
  transition: transform 50ms ease ;
}

＆＃13;

<button class="ui button btn"> That rocks!</button>

＆＃13;

在悬停时转换过渡后，按钮会快速恢复

4 个答案: