div Hover当到达边界时发出

Question

我想在div上悬停效果，我在悬停在div上时应用了底部样式，一切正常但是当悬停边界/ div的边缘意味着div持续抽搐/跳跃。

我的代码：

.traning-box {
  background: #fff;
  padding-top: 70px;
  padding-bottom: 30px;
  box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
  border-radius: 5px;
  width: 120px;
  text-align: center;
}

.traning-box:hover {
  bottom: 15px;
  position: relative;
}

<div class="traning-box">
  <p> Test box</p>
</div>

Answer 1

尝试使用:after伪元素。当.traning-box上升时，:after会关闭，因此光标仍然会超过.traning-box（因为它是:after的父块。）

.traning-box {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
  padding-top: 70px;
  padding-bottom: 30px;
  position: relative;
  text-align: center;
  width: 120px;
}

.traning-box:after {
  bottom: 0;
  display: block;
  content: '';
  height: 15px;
  left: 0;
  position: absolute;
  width: 100%;
}

.traning-box:hover {
  margin-top: -15px;
}

.traning-box:hover:after {
  bottom: -15px;
}

<div class="traning-box">
  <p>Test box</p>
</div>

Answer 2

您可以使用animation来实现它。

＆＃13;

＆＃13;

.traning-box {
  background: #fff;
  padding-top: 70px;
  padding-bottom: 30px;
  box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
  border-radius: 5px;
  width: 120px;
  text-align: center;
  margin:20px;
  position:relative;
}

.traning-box:hover {
  animation-name:move;
  animation-duration:1s;
  animation-iteration-count:1;
  animation-timing-function: ease;
  position: relative;
  border:1px solid red;
}

@keyframes move{
  50%{
    transform:translateY(-15px);
  }
}

＆＃13;

<div class="traning-box">
  <p> Test box</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要同时使用transition和translate来实现平滑的悬停效果。

＆＃13;

＆＃13;

.traning-box {
  background: #fff;
  padding-top: 70px;
  padding-bottom: 30px;
  box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
  border-radius: 5px;
  width: 120px;
  text-align: center;
  transition: all 0.5s linear;
}

.traning-box:hover {
  transform: translateY(-15px);
  position: relative;
}

＆＃13;

<div class="traning-box">
  <p> Test box</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

请尝试以下操作。你必须使用内部div来编写悬停效果。

＆＃13;

＆＃13;

.traning-box{
  background: #fff;
  padding-top: 70px;
  padding-bottom: 30px;
  box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
  border-radius: 5px;
  width: 120px;
  text-align: center;
}
.traning-box1 {width:120px;}

.traning-box1:hover .traning-box{
  bottom: 15px;
  position: relative;
}

＆＃13;

<br/>
<br/>
<div class="traning-box1">
<div class="traning-box">
                <p> Test box</p>
           
            </div>
            </div>

＆＃13;

＆＃13;

＆＃13;