CSS实现鼠标悬停某div时显示另一个div的方法

嘿，这个问题挺常见的！先给你明确答案：仅用CSS完全可以实现，而且如果你的需求只是简单的 hover 触发显示/隐藏，CSS是更优的选择——毕竟它更轻量，不需要额外引入JS库。当然，jQuery也能搞定，但适合更复杂的场景。

能不能用CSS实现，核心要看你的目标元素.mydiv3和触发hover的div之间的DOM关系，因为CSS的hover选择器依赖于元素间的层级或相邻关系：

1. 相邻兄弟或后代关系 #

如果触发hover的div是.mydiv3的直接父元素，或者是它的相邻兄弟元素（紧挨着的），那用CSS就非常简单：

比如父元素hover显示子元素：

/* 假设触发hover的是.mydiv1，它是.mydiv3的父元素 */
.mydiv1:hover .mydiv3 {
  display: block; /* 或者你需要的显示方式，比如opacity: 1配合transition做过渡 */
}
/* 默认隐藏.mydiv3 */
.mydiv3 {
  display: none;
}

如果是相邻兄弟（比如.mydiv2紧挨着.mydiv3）：

.mydiv2:hover + .mydiv3 {
  display: block;
}
.mydiv3 {
  display: none;
}

2. 非相邻/无直接DOM关系的情况 #

如果触发hover的div和.mydiv3没有上述的DOM关系（比如在页面的不同区域），CSS就无能为力了——因为CSS选择器没法跨层级选中不相关的元素。这时候就需要用jQuery（或者原生JS）来处理。

当CSS搞不定的时候，jQuery的优势就体现了，它可以轻松绑定hover事件，不管元素在DOM里的位置：

// 给触发hover的div绑定事件，替换成你的触发元素类名
$('.trigger-div').hover(
  function() {
    // 鼠标移入时显示.mydiv3
    $('.mydiv3').show();
  },
  function() {
    // 鼠标移出时隐藏.mydiv3
    $('.mydiv3').hide();
  }
);

如果需要更平滑的过渡效果，还可以用fadeIn()/fadeOut()或者slideToggle()这些方法：

$('.trigger-div').hover(
  () => $('.mydiv3').fadeIn(300), // 300是动画时长，单位毫秒
  () => $('.mydiv3').fadeOut(300)
);

• 如果元素DOM关系符合CSS选择器的范围：优先用CSS，性能更好，代码更简洁，还不用依赖外部库。
• 如果元素没有直接DOM关系，或者需要更复杂的交互逻辑（比如延迟显示/隐藏、结合其他事件联动）：**用jQuery（或原生JS）**更灵活。

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