Javascript addClass（）防止css转换

在一段固定时间后将图像从灰度转换为全色的过程中，我遇到了Jquery与CSS转换交互的问题，我不确定该解决什么问题：

如果我从现有的

#globecont img{

样式开始，并将

.globefc

从一个类更改为一个

#globefc:hover

一切都很好。但是当我在延迟后使用Jquery将其作为一个类应用时，“类”被正确地添加到img中，但过滤器中没有发生转换或更改

我还没有尝试使用.trigger（“hover”）来代替.addClass（），但是不管它是否有效，有人能解释一下为什么它不能像写的那样工作吗

无标题文件
正文{背景色：#000000；}
#globecont{位置：相对；左边距：自动；右边距：自动；文本对齐：中心；}
#全球经济img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；
过渡期：3s；
}
.globefc{
滤镜：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：无；
}
$（文档）.ready（函数（）{
$（'#globe'）.delay（500）.addClass（“globefc”）；
});

问题是，

#globecont img

是一个比

.globefc

更具体的选择器，这意味着它覆盖了

.globefc

添加的样式，即使它位于样式表的较低位置

您可以通过使第二个选择器更具体来解决此问题：

#globe.globefc {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
    }

---

注意：在您的html中，您已经在图像中添加了类

。globefc

，因此jQuery实际上没有做任何事情。在JSFIDLE中，我删除了该类，因为它是在500毫秒后由jQuery添加的。

谢谢，我没有真正考虑CSS优先级在这里发挥作用，但我现在明白了。谢谢！接受answ呃,一有消息,me@DMSJax如果使用css:D，您将经常遇到这些问题。最简单的方法之一是使用浏览器检查器。对未来的读者来说，这是一个附带说明：我意识到.delay（）不能与addClass（）一起使用，因为.delay（）只适用于动画效果，它必须改为setTimeout（）。

#globe.globefc {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
    }