如何用CSS实现鼠标悬停时显示/隐藏两个互不嵌套的DIV

哦，我懂你的问题了——你想通过悬停.a元素来控制另一个完全独立的.b元素显示或隐藏，但原来的CSS代码没起作用，对吧？问题出在你用错了CSS选择器，我来给你一步步解决：

为什么原来的CSS无效？ #

你写的.a:hover .b是后代选择器，它只会匹配嵌套在.a内部的.b元素。但你的.a和.b是互不嵌套的独立元素，这个选择器根本找不到目标，所以自然没效果。

针对不同DOM结构的解决方案 #

根据.a和.b在DOM中的位置关系，有两种CSS方案，实在不行还可以用JavaScript兜底：

情况1：.a和.b是相邻兄弟（紧挨着，中间没有其他元素） #

用相邻兄弟选择器+，它会匹配紧跟在.a之后的第一个.b元素：

.a { 
  background-color: #323232; 
  width: 200px; 
  height: 300px; 
  color: #FFF; 
} 
.b { 
  background-color: #0000ff; 
  font-size:12px; 
  color: #FFF;
  visibility: hidden; /* 默认隐藏 */
}

/* 悬停.a时显示相邻的.b */
.a:hover + .b {
  visibility: visible;
}

情况2：.a和.b是普通兄弟（中间有其他元素） #

用通用兄弟选择器~，它会匹配.a之后所有同层级的.b元素：

.a { 
  background-color: #323232; 
  width: 200px; 
  height: 300px; 
  color: #FFF; 
} 
.b { 
  background-color: #0000ff; 
  font-size:12px; 
  color: #FFF;
  visibility: hidden; /* 默认隐藏 */
}

/* 悬停.a时显示所有后续同层级的.b */
.a:hover ~ .b {
  visibility: visible;
}

情况3：.a和.b不在同一个父元素下（CSS无法直接控制） #

如果两个元素的DOM层级完全无关，CSS选择器就无能为力了，这时候用JavaScript来实现：

// 获取两个元素
const hoverTarget = document.querySelector('.a');
const toggleTarget = document.querySelector('.b');

// 鼠标进入时显示
hoverTarget.addEventListener('mouseenter', () => {
  toggleTarget.style.visibility = 'visible';
});

// 鼠标离开时隐藏
hoverTarget.addEventListener('mouseleave', () => {
  toggleTarget.style.visibility = 'hidden';
});

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