鼠标悬停div时如何去除左右间距并铺满背景？

嘿，我帮你排查了这个问题～悬停时div两侧出现间距，通常是浏览器默认样式、盒模型设置不当或者hover样式里额外加了边距导致的，给你几个实用的解决办法：

• 重置元素默认内外边距：浏览器会给部分元素添加默认的margin或padding，可以直接给目标div清零这些值，避免悬停时边距显现：

  .target-div {
    margin: 0;
    padding: 0;
  }
  

• 设置正确的盒模型：添加box-sizing: border-box，让元素的内边距和边框都包含在设定的宽度内，不会额外撑开元素导致间距：

  .target-div {
    box-sizing: border-box;
    width: 100%; /* 确保宽度占满父容器 */
  }
  

• 检查hover样式代码：如果你的hover逻辑里不小心加了margin-left或margin-right属性，直接删除这些多余的设置即可。

调整后的完整示例（假设你的div类名为hover-box）：

.hover-box {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  transition: background-color 0.3s;
}

.hover-box:hover {
  background-color: #f0f0f0; /* 替换成你的悬停背景色 */
}

这样修改后，div悬停时就会完全铺满父容器，不会出现左右间距，背景也能完整显示啦～

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