使用jQuery实现鼠标悬停时红圆圈切换为蓝圆圈的问题排查

问题根源 #

1. 初始状态下蓝圆圈未隐藏，导致页面加载后两个圆圈同时显示
2. jQuery mouseenter 方法不支持传入两个回调函数，你写的第二个回调不会执行，导致红圆圈在悬停时无法立刻隐藏
3. 两个圆圈默认上下排列，切换时位置变化会造成视觉断层

修复方案 #

1. 调整CSS实现圆圈重叠

给父容器设置相对定位，两个圆圈设为绝对定位确保完全重叠；同时默认隐藏蓝圆圈：

.circles {
  position: relative;
  width: 200px;
  margin: 0 auto;
}

.red, .blue {
  position: absolute;
  width:200px;
  height: 200px;
  border-radius: 50%; /* 用50%比固定值更适配圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
  display: none; /* 默认隐藏蓝圆圈 */
}

2. 修正jQuery事件逻辑

使用 hover 方法（mouseenter 和 mouseleave 的快捷方式），在鼠标进入时同步切换显示状态，离开时可选择还原：

$(document).ready(function(){
  $('.red').hover(
    // 鼠标进入时
    function(){ 
      $(this).hide();
      $('.blue').show();
    },
    // 鼠标离开时（不需要还原可删除此回调）
    function(){
      $(this).show();
      $('.blue').hide();
    }
  );
});

3. 完整HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circles">
    <div class="red">red circle</div>
    <div class="blue">blue circle</div>
</div>

效果说明 #

• 页面加载后仅显示红圆圈
• 鼠标悬停时红圈立刻隐藏、蓝圈同步显示，实现无缝切换
• 鼠标离开后自动切回红圆圈（移除第二个回调可保留蓝圈显示状态）

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