Html 当鼠标悬停在元素上时，如何进行完全转换？

.box{
宽度：100px；
高度：100px；
背景：红色；
过渡：所有1都易于输入输出；
}
.box:悬停{
背景：黄色；
}

---

我想你应该用JS来做这个。首先需要为背景更改创建动画，然后可以将其设置为类，并在悬停时添加该类，并在动画结束时或在

webkitAnimationEnd

上删除该类

$（'.box'）。悬停（函数（）{
$（this.addClass（'animate'）；
$（this）.on（'webkitAnimationEnd'，function（）{
$（this.removeClass（'animate'）；
})
})

.box{
宽度：100px；
高度：100px；
背景：红色；
显示：内联块；
利润率：10px；
}
.box.animate{
动画：changeColor 2s线性；
}
@关键帧改变颜色{
0% {
背景：红色；
}
50% {
背景：黄色；
}
100% {
背景：红色；
}
}

---

我认为没有javascript您无法做到这一点，但找到答案会很有趣

轻量级javascript解决方案可以是这样的：

// Get the elemnt
var myDiv = document.getElementById('box');

// Detect hover
myDiv.onmouseover = function() { 
  // Add a force class to the element
  myDiv.className += " force";
  // Reset the cass name after 1sec (100ms)
  setTimeout(function(){ myDiv.className = "box"; }, 1000, myDiv);
}

稍微更改您的标记，使事情变得更简单：

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

---

检查编辑：类似的解决方案，但依赖于过渡和动画：

---

这是我的解决方案：

基本上，您需要为长方体添加一个容器，然后播放CSS动画

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

---

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

我对纯CSS方式感兴趣，但感谢您的回答！这非常接近，您只需使用js添加/删除类，其余的都是纯css，但我也想看看是否可以使用css来完成。可能重复：可能重复：

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

#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;
    }
}