WordPress Kadence主题：悬停文字时背景色切换异常问题

异常原因 #

1. 行内元素间隙导致状态中断
   你的span是行内元素，h1中span之间的空格、换行或普通文本节点会形成独立的鼠标可交互区域。当慢速在span间移动鼠标时，鼠标会经过这些间隙区域，此时没有任何span处于:hover状态，#wrapper的:has()匹配条件失效，背景色会恢复主题默认；而快速移动时，浏览器来不及处理“离开前一个span”的状态变更，直接触发后一个span的:hover，所以背景色能正常切换。

2. 主题样式优先级干扰
   Kadence免费版主题可能给.site或#wrapper元素设置了带有更高优先级的背景样式（比如使用!important，或者更具体的嵌套选择器），导致你用.site:has(...)定义的样式无法覆盖默认值。

解决方法 #

方案1：消除行内元素间隙，避免状态中断

将span设置为inline-block，并手动控制间距，替代默认的行内元素空格间隙：

/* 让span成为块级行内元素，消除默认间隙 */
h1 > span {
  display: inline-block;
  margin-right: 0.3em; /* 手动设置span之间的间距，可根据需求调整 */
}

或者通过父元素字体大小消除间隙：

/* 父元素设为0字号消除间隙 */
.intro h1 {
  font-size: 0;
}
/* 给span和普通文本恢复原字体大小 */
.intro h1 > span,
.intro h1 {
  font-size: 2.5rem; /* 替换为你h1的实际字号 */
}

方案2：提升CSS选择器优先级，覆盖主题样式

使用更具体的选择器，并添加!important确保样式生效：

/* 鼠标悬停时文本变色 */
h1>span:hover {
  color: #dddddd;
}

/* 用更具体的选择器+!important覆盖主题默认样式 */
#wrapper.site:has(#rule1:hover) {
  background-color: red !important;
}
#wrapper.site:has(#rule2:hover) {
  background-color: blue !important;
}
#wrapper.site:has(#rule3:hover) {
  background-color: green !important;
}

方案3：JavaScript辅助实现（稳定性更高）

如果CSS方案仍存在兼容性或状态异常问题，用JS直接控制背景类：

// 获取目标元素
const wrapper = document.getElementById('wrapper');
const targetSpans = document.querySelectorAll('.intro h1 span');

// 给每个span添加鼠标进入事件
targetSpans.forEach(span => {
  span.addEventListener('mouseenter', () => {
    // 先移除所有背景类
    wrapper.classList.remove('bg-red', 'bg-blue', 'bg-green');
    // 根据span ID添加对应背景类
    switch(span.id) {
      case 'rule1':
        wrapper.classList.add('bg-red');
        break;
      case 'rule2':
        wrapper.classList.add('bg-blue');
        break;
      case 'rule3':
        wrapper.classList.add('bg-green');
        break;
    }
  });

  // 鼠标离开span时恢复默认背景
  span.addEventListener('mouseleave', () => {
    wrapper.classList.remove('bg-red', 'bg-blue', 'bg-green');
  });
});

对应的CSS类：

.bg-red { background-color: red !important; }
.bg-blue { background-color: blue !important; }
.bg-green { background-color: green !important; }

内容的提问来源于stack exchange，提问作者Matthias Gustav Pan