使用CSS和jQuery设置鼠标离开动画？

我正在使用CSS转换来设置鼠标悬停时背景颜色的动画

我有以下代码：

div{
宽度：100px；
高度：100px；
背景：红色；
}
div:悬停{
背景：绿色；
过渡：所有0.5s缓进缓出；
}

1）您将css更改为

div {
    width: 100px;
    height: 100px;  
    background: red;
    transition: background 0.5s ease-in-out;
}

div:hover {
    background: green;

}

将转换设置为元素，而不是伪类

---

(二)

使用jQuery，您要么需要两个元素来交叉淡入淡出，要么需要一个彩色动画插件。jQuery UI内置了彩色动画，然后您可以执行以下操作：

$('div').on({
    mouseenter: function() {
        $(this).animate({backgroundColor: 'green'},1000)
    },
    mouseleave: function() {
        $(this).animate({backgroundColor: 'red'},1000)
    }
});

---

如果您还没有将jQueryUI用于其他用途，我建议您使用更小的插件之一，比如

这应该能解决你的问题

div {
    width: 100px;
    height: 100px;  
    background-color: red;
    transition: background-color 0.5s;
}

div:hover {
    background-color: green;
}

1)