Javascript 在鼠标悬停并移出不同元素时制作动画

我有一个未排序的列表：

<ul>
  <li></li>
  <li></li>
  ...
</ul>

我会将class.active添加到鼠标悬停的项目中，效果如下：

但是，我想知道是否可以在活动项目更改期间制作一些动画

例如，使黑地从一个项目移动到另一个项目

您可以简单地使用CSS3转换，如：

所以是的，你不需要JS， 你不需要任何特殊的课程，

---

只需CSS的：悬停选择器。

我认为您的设计最难的部分是，当文本下方有深色背景时，文本的前景色需要改变。为了顺利完成，你需要在背景移动时改变背景前文本的颜色，这确实非常棘手。如果你能想出一个不需要改变文本颜色的配色方案，效果可能会更好。当然，你可以，你可以制作任何你想要的动画，只要去做就行了！若地面移动不是必须的，那个么您可以纯粹使用css3转换在背景色和颜色上制作动画。添加活动类不需要javascript，只需在css中使用：hover。

li, li *{              /* Target LI and it's children */
   backgorund:#fff;
   transition: 0.3s;
}
li:hover{
   background: 2C3E50; /* will be applied smoothly */
   color: #fff;        /* will be applied smoothly */
}
li:hover h2{
   color: #fff;        /* will be applied smoothly */
}