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）

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



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



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



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


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



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



然后看看它来自哪种样式表。如上所述，首先是作者样式表，然后是用户，然后是用户代理。使用！重要用户样式的优先级高于作者！重要样式。选择器越具体，它将获得越多的优先级。例如，“div.co p”上的样式将优先于“p”标记上的样式。



最后，按照定义的顺序对规则进行排序。稍后在文档树中定义的规则具有比先前定义的规则更高的优先级。并且直接在样式表中考虑来自导入样式表的规则。

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

1 个答案: