如何使用CSS实现导航元素悬停展开时推开相邻其他元素

算力阿峰

2026-10-4

问题原因

你使用的transform: scaleY()属于CSS视觉变换属性，仅修改元素的渲染效果，不会改变其在文档流中实际占用的空间，因此悬停时只会在视觉上放大重叠相邻元素，无法推开周围内容。

解决方案

将放大逻辑改为修改元素实际占用的高度属性，即可触发文档流重排，自动推开周围元素，同时还能避免scale导致的文字拉伸变形问题。修改后的完整代码如下：

修改后的CSS代码

.nav-component{
    margin: 0;
    padding: 0 16px;
    min-height: 80px; /* 初始高度，可根据实际需求调整 */
    display: flex;
    align-items: center; /* 文字垂直居中 */
    background-color: rgba(167, 167, 167, 0.705);
    transition: all 1s ease-in-out;
    border: 1px solid;
}

.nav-component:hover{
    min-height: 160px; /* 悬停时高度翻倍，对应你之前scaleY(2)的效果 */
    background-color: #e2e2e2c2;
}

原有HTML代码无需修改

<nav class='nav-container'>
    <div class="nav-component">
        <div class="li">
            <h1>About Me</h1>
        </div>
    </div>
    <div class="nav-component">
        <div class="li">
            <h1>Projects</h1>
        </div>
    </div>
    <div class="nav-component">
        <div class="li">
            <h1>Experience</h1>
        </div>
    </div>
    <div class="nav-component">
        <div class="li">
            <h1>Contact</h1>
        </div>
    </div>
</nav>