如何实现跨元素hover交互？解决侧边菜单悬停联动问题

要实现你需要的联动hover效果，仅靠CSS无法跨元素触发样式，需要结合JavaScript监听hover事件同步对应元素状态，同时配合CSS实现美观的过渡效果。以下是完整实现方案：

1. 调整CSS，添加统一hover样式 #

定义高亮样式并优化基础布局，确保图标和菜单项的hover效果一致，同时保留菜单关闭时图标的独立交互：

.header-area {
    background: #111;
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: space-between;
}

a{
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease; /* 统一过渡动画，让交互更平滑 */
}

.logo a {
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    margin-left: 50px;
}

.icons {
    position: absolute;
    height: 100vh;
    width: 60px;
    background-color: #111;
    top: 0;
    left: 0;
    z-index: 9;
}

.icons a, .offcanvas-menu a{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offcanvas-menu a{
    padding: 0 1.5rem;
    width: 180px; /* 固定菜单项宽度，避免hover时宽度跳动 */
}

.offcanvas-menu {
    padding-top: 56px;
    position: fixed;
    top: 0;
    left: 0;
    background: #111;
    width: auto;
    height: 100vh;
    transform: translateX(-100%);
    transition: all .4s ease;
    z-index: 0;
}

.offcanvas-menu.active {
    transform: translateX(60px);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 20px;
    color: #fff;
}

/* 统一hover高亮样式 */
.menu-item-hover {
    background-color: #2d2d2d;
    color: #ffcc00;
}

/* 菜单关闭时，图标单独的hover效果 */
.icons a:hover:not(.menu-item-hover) {
    background-color: #2d2d2d;
    color: #ffcc00;
}

2. 修改JavaScript，实现联动hover #

通过监听hover事件，同步图标和对应菜单项的样式状态：

const openBtn = $('.open-btn');
const offcanvasMenu = $('.offcanvas-menu');

// 左侧图标hover事件（排除打开按钮）
$('.icons a').not('.open-btn').hover(
    function() {
        const itemClass = $(this).attr('class');
        // 菜单打开时，同步对应菜单项的hover状态
        if (offcanvasMenu.hasClass('active')) {
            $(this).addClass('menu-item-hover');
            $(`.offcanvas-menu a.${itemClass}`).addClass('menu-item-hover');
        }
    },
    function() {
        const itemClass = $(this).attr('class');
        if (offcanvasMenu.hasClass('active')) {
            $(this).removeClass('menu-item-hover');
            $(`.offcanvas-menu a.${itemClass}`).removeClass('menu-item-hover');
        }
    }
);

// 右侧菜单项hover事件
$('.offcanvas-menu a').hover(
    function() {
        const itemClass = $(this).attr('class');
        $(this).addClass('menu-item-hover');
        $(`.icons a.${itemClass}`).addClass('menu-item-hover');
    },
    function() {
        const itemClass = $(this).attr('class');
        $(this).removeClass('menu-item-hover');
        $(`.icons a.${itemClass}`).removeClass('menu-item-hover');
    }
);

// 简化菜单开关逻辑
openBtn.on('click', function(e) {
    e.preventDefault();
    offcanvasMenu.toggleClass('active');
});

3. 优化HTML（可选） #

确保左侧图标和右侧菜单项的类完全对应，替换图标让菜单项和图标语义匹配：

<nav class="icons d-flex flex-column align-items-center gap-3 text-light">
    <a class="open-btn" href="#">
        <i class="fa-solid fa-bars"></i>
    </a>
    <a class="primeiro">
        <i class="fa-solid fa-house"></i>
    </a>
    <a class="segundo">
        <i class="fa-solid fa-user"></i>
    </a>
    <a class="terceiro">
        <i class="fa-solid fa-wrench"></i>
    </a>
    <a class="quarto">
        <i class="fa-solid fa-tag"></i>
    </a>
    <a class="quinto">
        <i class="fa-solid fa-newspaper"></i>
    </a>
    <a class="sexto">
        <i class="fa-solid fa-envelope"></i>
    </a>
</nav>

效果说明 #

• 菜单关闭时：hover左侧图标，仅图标触发高亮效果
• 菜单打开时：hover左侧图标，对应菜单项同步高亮；hover菜单项，对应图标同步高亮
• 所有交互都添加了0.3s过渡动画，避免生硬的样式切换

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