Question

背景：我正在使用Wordpress构建一个Elementor网站，并希望使用Javascript修改悬停属性。

我所做的事情： 根据此解决方案（Change :hover CSS properties with JavaScript）中的答案，我已经能够使我的代码在JSfiddle（https://jsfiddle.net/lindychen/hL60waqd/2/）中工作。

问题： 但是，当我以以下方式将此代码导入到我的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>

有人可以让我知道如何解决此问题吗？谢谢。

Answer 1

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

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);

}

因此无需创建节点。参见insertAdjacentHTML on MDN

无法更改：使用JavaScript悬停CSS属性

1 个答案: