Question

我有一个问题，当我做一个按钮并让它改变颜色时，悬停在它上面工作正常但是当我第一次使用jQuery动画颜色时，悬停颜色不再起作用，但点击仍然有效时的活动颜色，怎么了？

HTML：

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

CSS：

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

jQuery的：

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

JSFiddle DEMO

Answer 1

只需将!important添加到您的悬停中，如下所示：

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

<强> DEMO

Answer 2

因为，当你使用时：

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

它将内联CSS 设置为<a>：

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

和内联CSS 优先于外部或内部CSS ，因此要覆盖它，您可以将其作为 Guruprasad Rao 上面说过或者你可以这样做：

.button[style]:hover {
   color: #FFF !important;
 }

[style] 选择器仅在您的元素仅包含内联CSS 时才有效。

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

2 个答案: