网页开发求助：顶部白边与按钮Hover动画失效问题排查

问题1：顶部白边修复 #

原因 #

页面顶部的按钮、标题元素背景透明，body默认无背景色，且.main作为背景层在DOM结构中靠后，仅覆盖自身高度区域，顶部区域显示body默认白色背景。

修复方案 #

1. 将.main设置为固定定位并铺满整个视口，作为底层背景；
2. 调整DOM结构，把.main移到最前面，确保背景层优先渲染；
3. 清除body默认边距。

问题2：按钮Hover动画未生效修复 #

原因 #

按钮的left属性值缺少px单位，导致CSS语法错误，浏览器无法正确解析按钮样式，包括hover状态的过渡动画。

修复方案 #

1. 给.btn-1和.btn-2的left属性添加px单位；
2. 调整.btn-2为绝对定位，避免相对定位导致的布局偏移，确保按钮在可视区域内触发hover。

修改后的完整代码 #

styles.css

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  max-width: 1940px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

.main {
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #000000, #808080);
}

html {
  scroll-behavior: smooth;
}

h1 {
  position: absolute;
  z-index: 10;
  font-family: fantasy;
  font-size: 150px;
  text-align: center;
  color: #ff1493;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 750px;
}

h2 {
  color: white;
  top: 100px;
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  z-index: 10;
}

.btn-1 {
  width: 150px;
  height: 50px;
  border: none;
  color: white;
  background-color: #ff1493;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 white;
  transition: ease-out 0.3s;
  font-size: 1rem;
  outline: none;
  z-index: 10;
  position: absolute;
  top: 80px;
  left: 1150px;
}

.btn-1:hover {
  box-shadow: inset 150px 0 0 0 white;
  cursor: pointer;
  color: #ff1493;
}

.btn-2 {
  width: 150px;
  height: 50px;
  border: none;
  color: white;
  background-color: #ff1493;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 white;
  transition: ease-out 0.3s;
  font-size: 1rem;
  outline: none;
  z-index: 10;
  position: absolute;
  top: 80px;
  left: 550px;
}

.btn-2:hover {
  box-shadow: inset 150px 0 0 0 white;
  cursor: pointer;
  color: #ff1493;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HELLOOOO</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="main"></div>
  <div class="container">
    <button class="btn-1">home</button>
    <button class="btn-2">about</button>
  </div>
  <div class="h1">
    <h1>hi</h1>
  </div>
  <div class="h2">
    <h2>hello</h2>
  </div>
</body>
</html>

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