使用CSS实现，带有动态浮动高亮效果的导航菜单

HWL56792026-03-18 8:46

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }

    body {
        background:#f5f7fa;
        padding:40px;
    }

    .nav{
        position: relative;
        display: inline-flex;
        padding: 8px;
        background:#1e293b;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .nav-item{
        padding: 16px 24px;
        color:#94a3b8;
        font-size:14px;
        font-weight:500;
        white-space:nowrap;
        border-radius: 8px;
        transition: all 0.2s;
        cursor: pointer;
    }

    .nav-item:hover{
        color:#f1f5f9;
        background:#334155;
        anchor-name:--item-target;
    }

    .nav::after{
    content:'';
    position: absolute;
    inset: 0;
    position-anchor: --item-target;
    inset: anchor(inside, 0);
    outline: 2px solid #38BDF8;
    outline-offset:-2px;
    background-color: rgb(from #38BDF8 r g b / 0.15);
    transition: 0.2s;
    pointer-events: none;
    border-radius: 8px;
    opacity: 0;
    }


    .nav:has(.nav-item:hover)::after {
    opacity: 1;
    }

</style>
</head>
<body>
    <nav class="nav">
        <div class="nav-item">JavaScript</div>
        <div class="nav-item">React</div>
        <div class="nav-item">Vue3</div>
        <div class="nav-item">TypeScript</div><div class="nav-item">Node.js</div>
    </nav>
</body>
</html>

1. 创新的锚点定位技术

复制代码

.nav-item:hover {
    anchor-name: --item-target;
}
.nav::after {
    position-anchor: --item-target;
    inset: anchor(inside, 0);
}

使用了CSS Anchor Positioning API
将hover的菜单项设置为锚点（--item-target）
伪元素（高亮框）通过锚点定位到当前hover的菜单项位置

2. 精妙的状态管理

复制代码

.nav:has(.nav-item:hover)::after {
    opacity: 1;
}

使用:has()伪类检测是否有菜单项被hover
只有hover时才显示高亮框，默认隐藏
避免了JavaScript的事件监听

3. 现代化的视觉效果

复制代码

background-color: rgb(from #38BDF8 r g b / 0.15);
outline: 2px solid #38BDF8;
outline-offset: -2px;

4. 流畅的交互体验

复制代码

transition: all 0.2s;

高亮框的移动和显隐都有0.2秒的过渡动画
菜单项文字颜色和背景也有平滑过渡

5. 纯CSS解决方案

整个效果完全使用CSS实现，无需任何JavaScript代码，体现了CSS现代特性的强大能力。