如何加宽CSS :hover伪类触发的背景色显示宽度？

你现在悬停背景范围小的核心原因是.header-item用了外边距margin-left控制间距，背景色默认只会覆盖元素的内容+内边距区域，不会覆盖外边距，加上a标签默认是行内元素，上下方向的内边距不会生效，也会导致背景高度不够。

调整方案 #

• 把.header-item的margin-left替换为左右padding，背景色会自动覆盖内边距区域，直接拓宽横向悬停范围
• 把.header-item设置为弹性块元素，同时让它撑满整个头部高度，实现上下方向的背景全屏效果
• 可额外添加过渡属性，让悬停切换效果更柔和
• 补充说明：现有HTML中ul标签下直接放a标签不符合语义规范，建议把每个导航项用li标签包裹，不影响功能但更符合前端标准

修改后完整代码 #

CSS代码

.header {
  background-color: rgb(51, 51, 51);
  width: 100%;
  height: 3rem;
  position: fixed;
  z-index: 1;
}

.header-lines {
  color: #fff;
  font-family: "Noto Sans Display", sans-serif;
  font-style: none;
  text-decoration: none;
}

.header-list {
  list-style: none;
  margin: 0;
  padding-left: 0; /* 去掉ul默认的左内边距 */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 100%; /* 让ul撑满header高度 */
}

.header-item {
  padding: 0 1.5rem; /* 左右内边距控制横向间距，可按需调整数值改变背景宽度 */
  height: 100%;
  display: inline-flex;
  align-items: center; /* 文字垂直居中 */
  font-style: none;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.2s ease; /* 悬停过渡效果，不需要可以删掉 */
}

.header-item:hover {
  background-color: rgb(24, 24, 24);
}

如果需要保留第一个导航项和左侧边框的间距，给.header-list加padding-left: 2rem即可。

语义化优化后的HTML代码（可选）

<div class="header">
  <div class="header-lines">
    <ul class="header-list">
      <li><a target="_blank" href="#" class="header-item">youTunes</a></li>
      <li><a target="_blank" href="#" class="header-item">Overview</a></li>
      <li><a target="_blank" href="#" class="header-item">Music</a></li>
      <li><a target="_blank" href="#" class="header-item">Video</a></li>
      <li><a target="_blank" href="#" class="header-item">Gift Cards</a></li>
    </ul>
    <a href="#"></a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者João Silva