仪表盘侧边栏Hover交互异常：大Logo无法自动切换回小Logo

问题根源 #

原代码的逻辑有两个关键问题：

• 监听全局document的mouseover事件，范围太广且容易引发冲突
• 加了if($('.large-logo').hasClass('d-none'))的判断——当大Logo显示后（没有d-none类），后续所有鼠标事件都触发不了切换逻辑，自然没法切回小Logo

修复方案 #

直接给.sidebar绑定精准的mouseenter和mouseleave事件，逻辑更清晰，也不会有多余的判断限制：

HTML（无需修改） #

<div class="sidebar">
    <a href="#" class="sidebar-brand px-3">
       <img src="assets/img/large-logo.png" class="large-logo d-none">
       <img src="assets/img/small-logo.png" class="small-logo">
    </a>
</div>

修正后的jQuery代码 #

// 鼠标移入侧边栏：显示大Logo，隐藏小Logo
$('.sidebar').on('mouseenter', function() {
    $('.large-logo').removeClass('d-none');
    $('.small-logo').addClass('d-none');
});

// 鼠标移出侧边栏：显示小Logo，隐藏大Logo
$('.sidebar').on('mouseleave', function() {
    $('.small-logo').removeClass('d-none');
    $('.large-logo').addClass('d-none');
});

可选优化 #

如果想让切换更顺滑，给Logo加个过渡动画：

.large-logo, .small-logo {
    transition: opacity 0.3s ease;
}

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