动画元素在悬停时不会改变样式

Question

我有这个功能：

$(document).ready(function() {
  function animatexyz() {
    $('.xyz-ico a').animate({
      opacity: '.5'
    },1000).animate({
      opacity: '.15'
    },1000, animatexyz); 
  }
  animatexyz();
}

元素（xyz-ico a）会持续闪烁，直到我将鼠标移到它上面，然后它才会完全可见（不透明度 1）。留下元素后，它必须继续闪烁。

在我的 CSS 文件中，“.xyz-ico a:hover”伪元素的不透明度为 1，但只要我使用此动画“循环”，当我将鼠标移到元素上时，什么都不会发生变化。

我的 CSS 代码：

.xyz-ico {
  position:fixed; 
  top:150px; 
  right:30px; 
  z-index:999;
}

.xyz-ico a {
  opacity: .15;
}

.xyz-ico a:hover {
  opacity: 1;
}

我试图实现.hover和mouseover jQuery函数进入我的jQuery代码，但这不起作用（仅在我猜的两个动画步骤之间的非常短的时刻）。似乎循环“覆盖”了各处的不透明度值。也许你知道我可以如何简单地解决这个问题。

非常感谢:)

Answer 1

应该这样做：

.xyz-ico a:hover {
  opacity: 1 !important;
}

原因是 jquery 直接将样式设置为覆盖样式表中设置的任何样式的元素，这是由于级联样式表 (CSS) 的级联性质，如下所示：

（来自：http://webdesign.about.com/od/css/f/blcssfaqcascade.htm）

共有三种不同类型的样式表：

1. 作者样式表 这些是由网页作者创建的样式表。大多数人在想到 CSS 样式表时都会想到它们。

2. 用户样式表 用户样式表由网页的用户设置。这些允许用户更好地控制页面的显示方式。

3. 用户代理样式表 这些是 Web 浏览器应用于页面以帮助显示该页面的样式。例如，在 XHTML 中，大多数可视用户代理将 <em> 标记显示为斜体文本。这是在用户代理样式表中定义的。

为了解决冲突，Web 浏览器使用以下排序顺序来 确定哪种样式具有优先权并将被使用：

1. 首先，查找适用于相关元素的所有声明，以及指定的媒体类型。

2. 然后看看它来自什么样式表。如上所述，作者样式表首先出现，然后是用户，然后是用户代理。 !important 用户样式的优先级高于作者 !important 样式。选择器越具体，它获得的优先级就越高。例如，“div.co p”上的样式将比“p”标签上的样式具有更高的优先级。

3. 最后，按照定义的顺序对规则进行排序。在文档树中稍后定义的规则的优先级高于之前定义的规则。导入样式表中的规则在样式表中的规则之前被考虑。