在鼠标悬停期间制作动画并输出不同的元素

Question

我有一个无序列表：

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

我将使用mouseovered将类.active添加到项目中，这就是效果：

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

例如，让black ground从一个项目移动到另一个项目？

Answer 1

您可以简单地使用 CSS3过渡，例如：
的 jsFiddle demo with background color fade
的 jsFiddle demo with background image animation

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 */
}

所以是的，你不需要JS，
 你不需要任何特殊班级，
 只是CSS的:hover选择器。