本文介绍了悬停时强制结束CSS过渡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
默认情况下,如果您停止将鼠标悬停在某个元素上,则任何属性的转换也将停止。简单示例:
li {
position: relative;
transition: 1s;
left: 0;
}
li:hover {
left: 20px;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
推荐答案
如前所述,这在纯CSS中是不可能的
但是,如果鼠标移出文档,这里有一个需要嵌套且不适用于多个同级的黑客攻击。
body {
overflow: hidden;
}
[ctr] {
display: inline-block;
}
[box] {
width: 80px;
height: 80px;
background: red;
position: relative;
transition: 1s;
left: 0;
}
[ctr]:hover {
left: 20px;
width: 9999px;
height: 9999px;
animation: resetctr 1s 1s linear forwards;
}
[ctr]:hover>[box] {
left: 20px;
animation: resetbox 1s 1s forwards;
}
@keyframes resetbox {
from {
left: 20px;
}
to {
left: 0;
}
}
@keyframes resetctr {
to {
width: auto;
height: auto;
}
}
<div ctr>
<div box></div>
</div>
这篇关于悬停时强制结束CSS过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!