javascript - 在鼠标悬停和移出不同元素时制作动画

Question

我有一个无序列表:

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

我将类.active添加到鼠标悬停的项目上，这是效果:

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

例如，让黑地从一项移至另一项？

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，
你不需要任何特殊的类(class)，
只是 CSS 的 :hover 选择器。