求助：多维下拉菜单hover失效，跨父类CSS选择器使用问题

嘿，我明白你的困扰了——当两个目标容器分别归属不同父元素时，纯CSS确实没法直接跨父级触发样式变化，不过咱们有两种靠谱方案能搞定这个问题：

方案一：纯CSS实现（需依托结构逻辑） #

如果你的HTML结构是这样的（#lcontainer和#rcontainer是同级兄弟元素，.lvcontainer在#lcontainer内，.rvcontainer在#rcontainer内）：

<div id="container">
  <div id="lcontainer">
    <div class="lvcontainer">鼠标悬停触发</div>
  </div>
  <div id="rcontainer">
    <div class="rvcontainer">我要显示出来</div>
  </div>
</div>

那可以利用相邻兄弟选择器实现需求，在你的原有CSS基础上添加这段代码：

/* 先给右侧容器设置初始隐藏状态 */
.rvcontainer {
  display: none;
}

/* 当左侧容器被hover时，触发右侧容器内的目标元素显示 */
#lcontainer:hover + #rcontainer .rvcontainer {
  display: block;
}

原理很简单：当鼠标悬停在#lcontainer上时，通过+选择器选中它的下一个同级兄弟#rcontainer，再定位到内部的.rvcontainer修改显示属性。

方案二：JavaScript实现（无需调整结构） #

如果你的页面结构没法调整，或者需要更灵活的交互控制，用JS就完全没限制了。直接给.lvcontainer绑定鼠标事件，手动控制.rvcontainer的显示隐藏：

// 获取目标元素
const lvContainer = document.querySelector('.lvcontainer');
const rvContainer = document.querySelector('.rvcontainer');

// 鼠标进入时显示右侧容器
lvContainer.addEventListener('mouseenter', () => {
  rvContainer.style.display = 'block';
});

// 鼠标离开时隐藏右侧容器
lvContainer.addEventListener('mouseleave', () => {
  rvContainer.style.display = 'none';
});

如果页面上有多个这类下拉菜单组，还可以批量处理：

// 遍历所有菜单容器，批量绑定事件
const menuContainers = document.querySelectorAll('#container');
menuContainers.forEach(container => {
  const targetLv = container.querySelector('.lvcontainer');
  const targetRv = container.querySelector('.rvcontainer');
  targetLv.addEventListener('mouseenter', () => targetRv.style.display = 'block');
  targetLv.addEventListener('mouseleave', () => targetRv.style.display = 'none');
});

小补充 #

你原来的CSS里把#container设为display: table、#lcontainer和#rcontainer设为display: table-cell的布局逻辑是没问题的，只需要叠加上面的hover控制代码就能正常工作啦。

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