Невозможно изменить: наведите курсор на свойства CSS с помощью JavaScript

Question

Справочная информация: Я создаю Wordpress сайт с Elementor и хотел бы использовать Javascript для изменения свойств при наведении.

Что я сделал: Основываясь на ответе в этом решении ( Изменение: наведите свойства CSS с помощью 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 для MDN