动画鼠标离开与CSS和jQuery？

Question

我是使用CSS转换动画背景颜色鼠标悬停。

我有以下代码：

​

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  background: green;
  transition: all 0.5s ease-in-out;
}

<div></div>

​

此代码只对鼠标上的背景颜色进行动画处理。它不能使老鼠复活。我有两个问题：

1. 我如何使用CSS动画鼠标？
2. 如何使用jQuery only进行此操作？

小提琴手：http://jsfiddle.net/fz39N/

Answer 1

1)将css更改为

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

div:hover {
    background: green;

}

小提琴

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

2)

使用jQuery，您将需要两个元素交叉淡出，或一个彩色动画插件。jQuery UI内置了彩色动画，然后您可以：

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

小提琴

如果您还没有在其他方面使用jQuery UI，我建议使用一个小得多的插件，比如这一个！

Answer 2

这应该能解决你的问题

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

div:hover {
    background-color: green;
}