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

Animate text color jQuery CSS hover disappears?

本文关键字：悬停 消失 CSS jQuery 文本 颜色 动画      更新时间：2023-09-26

我有一个问题，当我做一个按钮，让它改变颜色时，悬停在它的工作很好，但当我第一次使用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);
<<p> JSFiddle演示/strong>

只需将!important添加到您的hover:

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

这是因为，当你使用:

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

它将内联CSS设置为您的<a>:

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

和inline CSS比外部或内部CSS有更多的优先级，所以要覆盖它，你可以像上面所说的Guruprasad Rao那样做，或者你可以这样做:

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

[style]选择器只在元素有inline CSS时才会起作用。

相关文章：