WordPress菜单#mega-menu-item-5128悬停无法触发#ForParents_BlueBar样式变更求助

一、CSS失效的核心原因 #

CSS的兄弟选择器~仅支持选择同一父元素下、位于当前元素后方的同级节点，你的#mega-menu-item-5128是嵌套在三层div内部的li标签，和#ForParents_BlueBar完全不属于同一父级的同级节点，因此选择器无法匹配，自然没有效果。

二、jQuery代码仅#Hello生效的原因 #

有几个常见的可能性：

• Max Mega Menu插件会动态生成菜单DOM，你绑定事件时菜单元素还未完成渲染
• WordPress默认开启jQuery的noConflict模式，直接使用$会触发报错
• 插件为菜单项绑定的事件阻止了hover事件冒泡，或者你实际悬停的是li内部的a标签，而非li本身
• 你额外引入的jQuery和WordPress自带的jQuery版本冲突

三、修复方案 #

方案1：修改jQuery代码（兼容性最好，优先推荐） #

首先删除你额外引入的jQuery CDN，WordPress自带jQuery不需要重复加载，修改后的functions.php代码如下：

function addCustomScript(){
?>
<script>
jQuery(document).ready(function ($) {
  // 绑定到li内部的a标签，避免事件被插件拦截
  $('#mega-menu-item-5128 .mega-menu-link').hover(function() {
      $('#ForParents_BlueBar').css('padding', '100px');
      // 正式使用时替换为下面这句实现显示隐藏
      // $('#ForParents_BlueBar').show();
  }, function() {
      $('#ForParents_BlueBar').css('padding', '0px');
      // 正式使用时替换为下面这句
      // $('#ForParents_BlueBar').hide();
  });

  $('#Hello').hover(function() {
      $('#ForParents_BlueBar').css('padding', '100px');
  }, function() {
      $('#ForParents_BlueBar').css('padding', '0px');
  });
});
</script>
<?php
}
add_action('wp_footer', 'addCustomScript');

修改说明：

• 把代码挂载到wp_footer而非wp_head，确保DOM渲染完成后再绑定事件
• 用jQuery自带的css()方法替代直接修改style属性，不需要加!important即可生效
• 绑定事件到li内部的.mega-menu-link节点，避免插件拦截li的hover事件

方案2：CSS实现（适合不想写代码的场景，兼容性稍差） #

用CSS4的:has()选择器实现，目前主流浏览器（Chrome 105+、Edge 105+、Safari 15.4+）都支持：

/* 只要header内部的#mega-menu-item-5128触发悬停，就选中后方的目标节点 */
header:has(#mega-menu-item-5128:hover) #ForParents_BlueBar {
  border: 2px solid red !important;
  padding: 40px !important;
  /* 正式使用时替换为 display:block !important; */
}

四、排查验证步骤 #

如果修改后还是不生效，可以按以下步骤排查：

1. 打开浏览器F12控制台，执行jQuery('#mega-menu-item-5128')，看返回结果长度是否为1，确认ID没有被插件动态修改
2. 在hover的回调函数中加入console.log('触发悬停')，悬停菜单项时看控制台是否有输出，确认事件是否成功绑定
3. 检查菜单项的CSS是否有pointer-events: none属性，如果有就加上#mega-menu-item-5128, #mega-menu-item-5128 .mega-menu-link {pointer-events: auto !important;}

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