我想要 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>
最佳答案
尝试使用:after
伪元素。当 .traning-box
上升时,:after
下降,所以光标仍然在 .traning-box
上(因为它是 :after
的父 block 。
.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>
关于html - 到达边界时的 div 悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48089975/