如何实现页面中间div鼠标移出时铺满整个页面？

没问题，我帮你搞定这个交互效果！你想要的是初始状态在页面中间的div，当鼠标移开它时平滑过渡铺满整个页面，对吧？结合你给出的CSS基础，我给你两种实现方案，按需选择~

方案一：纯JS+CSS（精准匹配“鼠标移出即全屏”需求） #

这个方案完全贴合你的描述：页面加载后div默认在页面中间，鼠标移出时立刻触发全屏过渡，还支持鼠标再次悬停恢复原状态。

HTML 代码 #

<div id="div1">
  鼠标移开我试试~
</div>

CSS 代码 #

/* 先重置body默认样式，避免多余边距和滚动条 */
body {
  margin: 0;
  min-height: 100vh;
}

#div1 {
  /* 初始状态：页面正中间的小尺寸 */
  width: 85%;
  height: 270px;
  border: 1px solid #663399;
  padding: 20px 0 0 20px;
  margin: 0 auto; /* 水平居中，比你原来的margin-right:25%更适配不同屏幕 */
  background-color: #663399;
  border-radius: 20px;
  transition: all 1s ease; /* 合并过渡属性，让所有变化都有平滑动画 */
  /* 实现垂直居中，确保div在页面正中间 */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* 全屏状态的样式类 */
#div1.full-screen {
  width: 100%;
  height: 100vh;
  margin: 0;
  top: 0;
  transform: translateY(0);
  border-radius: 0; /* 全屏时去掉圆角更协调 */
  border: none;
}

JavaScript 代码 #

const divElement = document.getElementById('div1');

// 监听鼠标移出事件，添加全屏类
divElement.addEventListener('mouseleave', function() {
  this.classList.add('full-screen');
});

// 可选：鼠标再次悬停时恢复原状态
divElement.addEventListener('mouseenter', function() {
  this.classList.remove('full-screen');
});

方案二：纯CSS（如果希望“默认全屏，鼠标悬停缩小到中间”） #

如果你想反过来：页面加载时div全屏，鼠标放上去才缩小到中间，那用纯CSS就能实现，不需要JS：

body {
  margin: 0;
  min-height: 100vh;
}

#div1 {
  /* 默认全屏状态 */
  width: 100%;
  height: 100vh;
  padding: 20px 0 0 20px;
  margin: 0;
  background-color: #663399;
  border-radius: 0;
  transition: all 1s ease;
}

#div1:hover {
  /* 鼠标悬停时缩小到页面中间 */
  width: 85%;
  height: 270px;
  border: 1px solid #663399;
  margin: 0 auto;
  border-radius: 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

关键细节说明 #

1. 我把你原来重复写的transition合并成了all 1s ease，既精简代码，又能让所有变化的属性（宽、高、边距、位置等）都有平滑过渡；
2. 用margin: 0 auto替代margin-right:25%做水平居中，这样在不同屏幕尺寸下都能保持居中，兼容性更好；
3. 加入了垂直居中的样式，确保div初始状态在页面正中间，而不是仅仅水平居中。

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