Javascript element.style.backgroundColor在WordPress上不起作用

我一直在尝试让一个按钮的背景在悬停时改变。我已经有了代码，但它确实有效，但出于某种原因。当我把它放在WordPress中时，背景不会改变

以下是工作代码：

以下是WordPress网站：

我还向jQuery添加了

标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

---

但是，它仍然不起作用。

您的网站存在一些问题，但归根结底是您使用的是

！重要信息

，适用于多种CSS样式。这样可以防止JavaScript修改按钮的

颜色

和

背景色

您在网站上的CSS（与您在JSFIDLE中显示的内容不同）是：

#钮扣{
显示：内联！重要；
文本对齐：居中！重要；
宽度：105px！重要；
高度：35px！重要；
边框：1px实心#5472d2！重要；
边际顶部：0px！重要；
背景：#ffffff！重要；//导致问题
边界半径：4px4px4px4px！重要；
颜色：#5472d2！重要；//导致问题
}

style.css

中还有一个引用，它会导致按钮出现问题：

按钮：悬停，
a、 按钮：悬停，
a、 按钮：已访问：悬停，
输入[type=“button”]：悬停，
输入[type=“reset”]：悬停，
输入[type=“submit”]：悬停{
背景：透明！重要；//导致问题
}

除非站点的某些元素完全不受您的控制，否则您应该很少需要使用

！重要信息

在CSS中。如果可以，请避免使用

！重要信息

，请在需要时完全使用样式，而不是覆盖样式

其他问题 还有一些其他问题需要考虑：

您不需要在WordPress中包含jQuery；它是自动完成的。您的站点当前包含jQuery两次：

JavaScript函数根本不使用jQuery，因此在本例中包含jQuery是不相关的

这应该在

#buttonmodcss:hover

上使用CSS来实现，而不是使用JavaScript来实现这一效果

使用CSS而不是JavaScript 我看不出您选择使用JavaScript而不是CSS的任何明显原因，但使用CSS将更容易实现您想要实现的目标：

#钮扣{
显示：内联；
文本对齐：居中；
宽度：105px；
高度：35px；
边框：1px实心#5472d2；
边际顶部：0px！重要；
背景：#ffffff；//不！重要
边界半径：4px4px4px4px；
颜色：#5472d2；//不！重要
}
#按钮鼠标悬停{
颜色：“fff”；
背景：“5472d2”；
}

您有一些JavaScript正在更改按钮的内联样式。这将覆盖您应用的任何其他内联样式，因为JS正在有效地更改标记

若要覆盖此选项，理想情况下需要更改JS本身，甚至删除影响此按钮的脚本

但是，作为最后手段，您可以使用以下css：

input#buttonmodcss:hover {
  background-color: black !important;
}

我在这里使用黑色来演示，但是你当然可以把它改成你想要的颜色

---

另外，WordPress已经加载了JQuery，所以您不应该再次加载它。此外，当您加载脚本时，您应该将它们排队，而不是将它们直接添加到头部。这是一个非常糟糕的做法。

感谢您的宝贵反馈，我不久前就开始使用wordPress，还有很多事情我还不知道，我正在学习。Phill Healey的回答解决了问题，但您也涵盖了我网站上的多个问题，对css的整体有了很好的理解，非常感谢，我也注意到了。非常感谢特别是对不良做法的反馈，我会密切关注