悬停离开动画

Question

当我们在转换为1s的元素上应用悬停效果时(就像div在悬停时有一个长方体阴影一样(。当鼠标悬停时，它会得到一个动画，但一旦你移开鼠标，它就没有转换，只是急剧返回到状态。

当我们离开悬停状态时，你如何给出1这样的过渡？

我看到了一些代码，但看不出是什么导致了它的发生。

div {
width: 50px;
height: 50px;
background: purple;
}
div:hover {
animation: nav 1s linear forwards;
}
@keyframes nav {
to {
box-shadow: 5px 5px 2px black;
}
}

<div></div>

Answer 1

你不应该做任何事情。当你停止悬停时，它会转换回来。

div {
width: 50px;
height: 50px;
background: purple;
transition: box-shadow 1s;
}
div:hover {
box-shadow: 5px 5px 2px black;
}

<div></div>

Answer 2

我在上面看到了正确的答案，但这里是JavaScript使用mouseover和mouseleave事件的另一个解决方案，但我注意到您使用.hover，因为它很简单。

div {
width: 50px;
height: 50px;
background: purple;
transition: all 1s;
}

<div id="d"></div>

const d = document.getElementById("d");
d.addEventListener("mouseover",()=>{
d.style.boxShadow = "5px 5px 2px black";
})
d.addEventListener("mouseleave",()=>{
d.style.boxShadow = "0px 0px 0px";
})

Answer 3

除了其他答案外，您还可以执行以下操作(非JS/jQuery(：

HTML:

<div class="box">
</div>

CSS：

body {
background: #CCC;
}
.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}
/* Create the hidden pseudo-element */
/* include the shadow for the end state */
.box::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
.box:hover::after {
opacity: 1;
}

<div class="box">
</div>