html - 将鼠标悬停在元素上时如何进行完整过渡？

Question

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s ease-in-out;
}
.box:hover {
  background: yellow;
}

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

如果光标在 .box 上的时间少于一秒钟，转换将停止并回退到它的原始阶段。有没有办法以某种方式强制执行整个动画，而不管悬停持续时间如何？

fiddle

Answer 1

编辑:类似的解决方案但依赖于转换和动画:https://jsfiddle.net/ok7pnrsL/

---

这是我的解决方案:https://jsfiddle.net/9yu0cozq/1/

基本上您需要为盒子添加一个容器，然后播放 CSS 动画。

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

当鼠标进入 .box 时，隐藏的容器就会出现(请注意，要使其正常工作，容器应具有足够的宽度和高度以适应鼠标可能到达的整个区域)。这个容器为自己创建一个动画以在 1 秒内“隐藏”回去。并且在显示 .box 的同时有一个动画。

#container {
    position:absolute;
    z-index:1;
    width: 0;
    height: 0;
}
#container:hover{
    animation-name:changeSize;
    animation-duration: 1s;
}
#container:hover .box{
    animation-name:changeColor;
    animation-duration: 1s;
}
.box {
    z-index:0;
    position:absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition:1s background;
}
.box:hover {
    background: yellow;
}
@keyframes changeColor {
    0% {
    background: red;
    }
    100% {
    background: yellow;
    }
}
@keyframes changeSize {
    0%,99% {
    width: 100%;height: 100%;
    }
    100% {
    width: 0;height: 0;
    }
}

因此，在不知道真实上下文的情况下，此解决方案给出了一系列假设，这些假设可能适合也可能不适合您的具体情况，但给出了如何使用纯 CSS 解决它的想法。