在鼠标离开时,是否可以反转此动画方向?
我尝试为 .link 添加 mouseleave 事件,但它会停止悬停效果。
.link {
position: relative;
overflow: hidden;
display: inline-block;
font-size: 100px;
}
.box {
width: 100%;
height: 100%;
content: '';
background: black;
position: absolute;
left: 0;
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
.link:hover .box {
transform: translateX(0)
}
<a class="link">
item
<span class="box"></span>
</a>