Javascript 动画文本颜色jQuery CSS悬停消失？

我有一个问题，当我制作一个按钮并让它在悬停时改变颜色时效果很好，但是当我第一次使用jQuery设置颜色动画时，悬停的颜色不再起作用，但单击时活动的颜色仍然起作用，这是怎么回事

HTML:

<a href="#" class='button'>BUTTON</a>

.button {
  padding: 10px 20px;
  color:#808080;
  background-color:#808080;
  text-decoration: none;
}
.button:hover {
   color: #fff; 
}
.button:active {
   background-color:#3C3C3C;
   color: #000; 
}

$('.button').animate({color:'#ccc' },1000);

jQuery:

<a href="#" class='button'>BUTTON</a>

.button {
  padding: 10px 20px;
  color:#808080;
  background-color:#808080;
  text-decoration: none;
}
.button:hover {
   color: #fff; 
}
.button:active {
   background-color:#3C3C3C;
   color: #000; 
}

$('.button').animate({color:'#ccc' },1000);

---

只需添加

！重要提示

如下所示：

.button:hover {
   color: #fff !important; 
}

---

这是因为，当您使用：

$('.button').animate({color:'#ccc' },1000);

它将

的内联CSS设置为：

<a style="color: rgb(204, 204, 204);" href="#" class="button">BUTTON</a>

只有当元素只有内联CSS时，[style]选择器才会工作