寻求实现双Div hover联动显示的jQuery代码解决方案

HTML结构 #

把两个Div包裹在同一个父容器中，方便统一监听鼠标交互：

<div class="container">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
</div>

基础CSS #

设置初始显示状态与简单样式区分：

#div1 {
  padding: 20px;
  background-color: #f0f0f0;
}

#div2 {
  padding: 20px;
  background-color: #e0e0e0;
  display: none; /* 初始隐藏Div 2 */
}

.container {
  display: inline-block; /* 让容器仅包裹内部元素，避免占用整行空间 */
}

jQuery代码 #

通过父容器的鼠标事件实现需求逻辑：

$(document).ready(function() {
  const $container = $('.container');
  const $div2 = $('#div2');

  // 鼠标进入容器内任意区域时，显示Div 2
  $container.on('mouseenter', function() {
    $div2.show();
  });

  // 鼠标完全离开容器时，隐藏Div 2
  $container.on('mouseleave', function() {
    $div2.hide();
  });
});

逻辑说明 #

• 父容器的mouseenter事件会在鼠标进入Div1或Div2时触发，确保Div2始终显示；
• 只有当鼠标完全离开父容器（同时离开两个Div）时，才会触发mouseleave事件隐藏Div2；
• 初始状态通过CSS直接设置Div2隐藏，无需额外JS初始化，更高效。

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