如何更改悬停在单词上的WordPress主题的背景颜色

Question

我为一个朋友在WordPress网站上工作，并为此使用免费的Kadence主题。

我想显示一些文本，当我将鼠标悬停在其中的一些单词上时，我希望网站的整个背景颜色发生变化。

为此，我确定了一个要用DevTools解决的元素：

<div id="wrapper" class="site wp-site-blocks">

它工作得很好，但前提是从一个跨度元素悬停到另一个元素的速度足够快。试试看。首先缓慢移动光标(背景颜色不变(。然后快速移动光标(背景发生变化(。

为什么？

/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}
/* color change of background on hover */
#wrapper:has(#rule1:hover) {
background: red;
}
#wrapper:has(#rule2:hover) {
background: blue;
}
#wrapper:has(#rule3:hover) {
background-color: green;
}

<div id="wrapper" class="site wp-site-blocks">
<section class="intro">
<h1>Rae magnim
<span id="rule1">volorrum</span>
<span id="rule2">recate</span>
<span id="rule3">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>

我也徒劳地试图这样称呼这个班级：

.site:has(#rule1:hover) {
background: black;
}

有什么想法吗？

Answer 1

当仅使用css悬停元素时，无法更改网站的背景。一般来说，孩子不能在css中影响父母，相反。只有使用相对选择器才能实现。选择器如：+和>。

有了javascript，情况就不一样了。

var list = document.querySelectorAll(".affects-wrapper");
var wrapper = document.querySelector("#wrapper");
list.forEach(function(item) {
item.addEventListener('mouseenter', function() {
wrapper.classList.add(item.id + "-class")
})
item.addEventListener('mouseleave', function() {
wrapper.classList.remove(item.id + "-class")
})
})

/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}

/* color change of background on hover */
.rule1-class {
background: red;
}
.rule2-class {
background: blue;
}
.rule3-class {
background-color: green;
}

<div id="wrapper">
<section class="intro">
<h1>Rae magnim
<span id="rule1" class="affects-wrapper">volorrum</span>
<span id="rule2" class="affects-wrapper">recate</span>
<span id="rule3" class="affects-wrapper">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>