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

Posted 2023-05-08

【中文标题】动画元素在悬停时不会改变样式

【英文标题】：Animated element does not change the style on hover

【发布时间】：2015-01-12 05:55:29

【问题描述】：

我有这个功能：

$(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代码，但这不起作用（仅在我猜的两个动画步骤之间的非常短的时刻）。似乎循环“覆盖”了各处的不透明度值。也许你知道我可以如何简单地解决这个问题。

非常感谢:)

【问题讨论】：

您的$(document).ready(function () … 也应该以括号结尾：$(document).ready(function () … );

【参考方案1】：

应该这样做：

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

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

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

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

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

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

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

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

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

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

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

【讨论】：

哦，哇，谢谢你，这很管用。不知何故，这一直是我的问题，这有点令人尴尬 xD 非常感谢！ :)