javascript - 动画元素不会更改悬停时的样式

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)

There are three different types of style sheets:

1. Author Style Sheets These are style sheets created by the author of the Web page. They are what most people think of when they think of CSS style sheets.

2. User Style Sheets User style sheets are set by the user of the Web page. These allow the user to have more control over how the pages display.

3. User Agent Style Sheets These are styles that the Web browser applies to the page to help display that page. For example, in XHTML, most visual user agents display the <em> tag as italicized text. This is defined in the user agent style sheet.

To resolve conflicts, Web browsers use the following sorting order todetermine which style has precedence and will be used:

1. First, look for all declarations that apply to the element in question, and for the assigned media type.

2. Then look at what style sheet it's coming from. As above, author style sheets come first, then user, then user agent. With !important user styles having higher precedence than author !important styles. The more specific a selector is, the more precedence it will get. For example, a style on "div.co p" will have a higher precedence than one just on the "p" tag.

3. Finally, sort the rules by the order they were defined. Rules that are defined later in the document tree have higher precedence than those defined earlier. And rules from an imported style sheet are considered before rules directly in the style sheet.