鼠标悬停时导航栏左侧Logo元素左移，如何用CSS修复？

架构老林

2026-8-23

修复导航栏Logo悬停缩放偏移的问题

你当前的问题出在两个核心点：

Logo用了flex:1占满导航栏剩余空间，缩放transform:scale()默认以元素中心为原点，导致悬停时向左偏移，还会拉扯整个导航栏布局
导航栏的justify-content: flex-start无法实现「Logo左、其余项居右」的预期布局

解决步骤&修改后代码

调整HTML结构，把右侧导航项包裹进一个容器，让Logo和右侧区域成为两个独立flex项，轻松实现左右分布
修改导航栏flex属性，用justify-content: space-between让两端元素分别靠左右对齐
给Logo设置transform-origin: left center，让缩放动画从左侧中心触发，避免偏移
将过渡属性从all改为具体的transform, color，减少不必要的性能消耗

修改后的HTML

<nav>
  <a id="logo" href="index.html">Hidden Logo</a>
  <div class="nav-right">
    <a href="en.html">EN</a>
    <a href="#contact">CONTACT</a>
    <a href="#portfolioo">PORTFOLIO</a>
    <a href="#about">ABOUT</a>
    <a href="index.html">HOME</a>
  </div>
</nav>

修改后的CSS

nav {
  display: flex;
  padding: 30px;
  overflow: hidden;
  justify-content: space-between; /* 实现左右分布 */
  align-items: center; /* 垂直居中对齐 */
  background-color: lightblue;
}

nav a {
  line-height: 19px;
  transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* 明确过渡属性 */
  text-decoration: none;
  color: black;
  font-family: "Goudy Old Style";
  padding: 0 14px;
}

#logo {
  transform-origin: left center; /* 设置缩放原点为左侧中心 */
}

.nav-right {
  display: flex; /* 让右侧项横向排列 */
}

nav a:hover {
  color: #b3d0ff;
  transform: scale(1.1);
}