如何调整导航栏（navbar）悬停时深色高亮区域的尺寸？

核心问题分析 #

你遇到的高亮区域过大，根源在于：

• #navbar a:hover 中强制设置了 height:6%，直接让hover状态的链接高度和导航栏一致，撑满了垂直空间
• 导航栏使用百分比高度（height:6%）会依赖父元素（body/html）的高度，导致尺寸计算不稳定
• 链接布局用float+嵌套div，造成垂直对齐混乱，间接放大了hover区域的视觉问题

修复方案 #

以下是调整后的代码，解决了hover区域失控的问题，同时优化了整体布局的可控性：

修正后的CSS

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  /* 改用固定高度，替代百分比，避免尺寸波动 */
  height: 50px;
  transition: top 0.3s;
  z-index: 2;
  /* 用flex实现链接垂直居中，替代float */
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

#navbar .buttonContainer {
  display: flex;
  gap: 8px; /* 控制链接之间的间距，替代margin */
}

#navbar a {
  color: white;
  padding: 8px 16px; /* 精细控制内边距，调整hover区域大小 */
  text-align: center;
  text-decoration: none;
  border-radius: 30px;
  /* 确保链接是inline-block，支持padding和border-radius的正确渲染 */
  display: inline-block;
  transition: background-color 0.2s; /* 添加过渡动画，提升体验 */
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
  border: 1px inset #000;
  /* 移除强制设置的height，让hover区域由padding自然撑开 */
}

/* 统一home链接的样式，如需单独定制可在此添加 */
#navbar .homeBorder a {
  /* 示例：border: 1px solid #fff; */
}

修正后的HTML

<div id="navbar">
  <div class="buttonContainer">
    <!-- 移除多余嵌套div，保持所有链接结构一致 -->
    <a href="#home" class="homeBorder">Home</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

关键改动点 #

• 移除#navbar a:hover中的height:6%，让hover区域由链接的padding自然决定，实现精细调控
• 导航栏改用固定高度（50px），替代百分比高度，避免尺寸依赖父元素的问题
• 使用Flex布局替代float，更轻松实现垂直居中，同时用gap控制链接间距，替代margin
• 统一所有链接的HTML结构，移除多余嵌套div，避免布局不一致
• 添加过渡动画，让hover效果更平滑

内容的提问来源于stack exchange，提问作者Jonathan Quinnell