Can'；t更改：使用JavaScript悬停CSS属性

背景： 我正在用

Elementor

构建一个

Wordpress

站点，并希望使用Javascript修改悬停属性

我所做的： 基于这个解决方案（）中的答案，我已经能够让我的代码在JSfiddle（）中工作

问题： 但是，当我以以下方式将此代码导入Wordpress站点时，该代码对我的页面没有任何影响。这就是我在Wordpress中实现代码的方式

<script type="text/javascript">
if (localStorage.getItem('trackerxyz') === 'page_m') {
var css = 'button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}';
var style = document.createElement('style');
 if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);
}
</script>

if（localStorage.getItem（'trackerxyz'）=='page_m'）{
var css='button.elementor button.elementor size sm:hover{background color:#cc3633；color:#ffffffff}button.elementor-size-sm{背景色：rgba（204,54,51,0.86）；#ffffff}；
var style=document.createElement（'style'）；
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
document.getElementsByTagName（'head'）[0].appendChild（样式）；
}

---

有人能告诉我如何解决这个问题吗？谢谢。

您可以通过以下方法解决此问题：

if (localStorage.getItem('trackerxyz') === 'page_m') {

  var style = '<style>button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}</style>';

  document.head.insertAdjacentHTML('beforeend', style);

}

if（localStorage.getItem（'trackerxyz'）=='page_m'）{
var style='button.elementor button.elementor size sm:hover{背景色：#cc3633；颜色：#ffffff}button.elementor-button.elementor-size-sm{背景色：rgba（204,54,51,0.86）；#ffffff}；
document.head.insertAdjacentHTML（'beforeend'，style）；
}

---

因此，无需创建节点。请参见什么是

if（style.styleSheet）

？您确定

if（localStorage.getItem（'trackerxyz'）==='page_m'）

不是问题吗？只需在

if

语句中添加一个

alert

，看看它是否工作。检查是否需要一个具有更高特异性的css选择器。如果该元素已经由其他css规则设置了样式，并且其选择器具有更高的特异性，则您的样式将不会覆盖现有样式，@paymamhammadi I I还有几个其他函数，它们使用相同的

If（localStorage.getItem（'trackerxyz'）===='page_m'）

运行，并且它们正在工作。另外，当我查看chrome开发者控制台时，我没有看到任何错误消息。@PatrickEvans谢谢您，先生。你说得对。插入！重要提示解决了问题。此功能有效，谢谢！问题在于@Patrickavants所说的，这是一个特殊性问题。添加一个！重要的是，它成功了。