鼠标移出悬停后align-content属性效果未恢复的问题求助

嘿，我来帮你搞定这个悬停后样式不恢复的问题！首先得给你指出来一个关键的CSS误区——align-content是专门给Flex容器用的属性（也就是你的.container，因为它设置了display: flex），根本不能用在Flex子项（那些.box元素）上！

你现在写的.box:hover { align-content: center; }其实完全是无效代码，浏览器根本不会理它。你之所以会觉得hover时有效果、移出后不恢复，大概率是把其他布局变化（比如子项的margin、浏览器临时的渲染波动）当成了这个属性的作用，实际上这个样式从来没真正生效过。

那要怎么实现你想要的「悬停时容器内内容交叉轴居中，移出后恢复初始对齐」的效果呢？分两种情况给你修正方案：

情况1：鼠标悬停在容器任意区域（包括空白处）就触发对齐变化 #

把hover样式加在容器本身就行，CSS会自动在鼠标移出时恢复初始样式：

.container {
  border: 2px solid grey;
  display: flex;
  height: 500px;
  width: 500px;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* 给容器加hover样式，替换你原来的.box:hover规则 */
.container:hover {
  align-content: center;
}
.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  margin: 15px;
}
#box1 { background-color: red; }
#box2 { background-color: blue; }
#box3 { background-color: orange; }
#box4 { background-color: aqua; }
#box5 { background-color: purple; }

情况2：只有鼠标悬停在具体的box上时，才触发容器的对齐变化 #

这种需要用CSS的:has()选择器（现代Chrome、Firefox、Edge都支持），监听容器内是否有.box被hover，然后修改容器的样式：

.container {
  border: 2px solid grey;
  display: flex;
  height: 500px;
  width: 500px;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* 当容器内有.box被hover时，改变容器的对齐方式 */
.container:has(.box:hover) {
  align-content: center;
}
.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  margin: 15px;
}
#box1 { background-color: red; }
#box2 { background-color: blue; }
#box3 { background-color: orange; }
#box4 { background-color: aqua; }
#box5 { background-color: purple; }

不管用哪种方案，核心都是把align-content的样式加对对象——它只能作用在设置了display: flex/display: grid的容器元素上，子项用这个属性完全无效。这样修改后，鼠标移出时CSS会自动帮你恢复到初始的align-content: flex-start状态，就不会出现“不恢复”的问题啦！

内容来源于stack exchange