WordPress X主题+UberMenu菜单悬停页面变暗功能失效求助

看起来你之前踩了CSS的一个常见坑——CSS没有父选择器，也无法通过子元素的hover状态直接影响页面其他区域的样式，这就是为什么你之前的代码完全无效的原因。下面给你一套可靠的解决方案，分步骤来：

1. 准备深色覆盖层的CSS #

首先在X主题的全局CSS里（路径：主题选项 > CSS，别放在Cornerstone可视化编辑器里，全局生效更稳定）添加以下代码：

/* 页面变暗的覆盖层样式 */
.page-darkened {
  position: relative;
}
.page-darkened::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* 调整透明度可以改变变暗程度 */
  z-index: 999; /* 确保覆盖层在页面内容上方，但低于UberMenu（菜单z-index通常是1000+） */
  pointer-events: none; /* 避免覆盖层阻止菜单的点击/悬停事件 */
}

2. 用JS监听菜单悬停事件 #

接下来在X主题的全局JS里（路径：主题选项 > JS）添加这段代码，用来监听目标菜单项的鼠标进入/离开事件，动态给页面添加/移除深色类：

// 获取目标菜单项和页面主容器
const targetMenuItem = document.getElementById('menu-item-443');
// X主题的页面主容器通常是.x-site，用开发者工具F12确认下你的页面容器类
const pageContainer = document.querySelector('.x-site');

// 确保元素存在再执行事件监听
if (targetMenuItem && pageContainer) {
  // 鼠标悬停时添加深色类
  targetMenuItem.addEventListener('mouseenter', () => {
    pageContainer.classList.add('page-darkened');
  });

  // 鼠标离开时移除深色类
  targetMenuItem.addEventListener('mouseleave', () => {
    pageContainer.classList.remove('page-darkened');
  });
}

关键注意事项 #

• 确认元素选择器正确：用浏览器F12开发者工具检查你的目标菜单项ID是不是#menu-item-443，以及页面主容器的类是不是.x-site（有些X主题变体可能用.x-root）。
• z-index调整：如果覆盖层挡住了UberMenu，把z-index:999调得比菜单的z-index小（可以用开发者工具查看菜单的z-index值）。
• 代码位置：优先放在X主题的全局CSS/JS里，不要放在Cornerstone可视化编辑器的局部区域，避免加载顺序问题导致代码不生效。

内容的提问来源于stack exchange，提问作者pdas