添加特定PNG后其他图片的.hover效果失效问题求助

问题根源 #

1. 所有容器设置了width:90%，导致容器占用超大空间，不同区域的容器互相重叠
2. 绝对定位元素默认按DOM渲染顺序堆叠，后添加的容器（比如b.png的container1）层级更高，直接覆盖了a.png、c.png的容器区域，鼠标无法触发被覆盖元素的hover事件

修复方案 #

1. 调整容器宽度，避免无意义重叠 #

将所有容器的宽度改为fit-content，让容器仅包裹内部图片内容，不再占用超大空间：

/** 修改所有容器的width属性 **/
.container, .container1, .container2, .container3, .container4, .container5, .container6 {
  width: fit-content; /* 替换原width:90% */
  padding: 20px;
  margin: 100px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
}

/* 保留各容器的定位参数 */
.container {
  top: 200px;
  left: -270px;
}
.container1 {
  top: 145px;
  left: 10px;
}
.container2 {
  top: 480px;
  left: -270px;
}
.container3 {
  top: 170px;
  left: -1000px;
}
.container4 {
  top: 800px;
  left: 550px;
}
.container5 {
  top: 165px;
  left: -280px;
}
.container6 {
  top: 570px;
  left: -775px;
}

2. 统一堆叠层级，确保hover优先级 #

给所有容器设置默认z-index，同时保持hover时元素置顶：

.container, .container1, .container2, .container3, .container4, .container5, .container6 {
  /* 其他样式不变 */
  z-index: 1;
}

.box:hover, .box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover, .box6:hover {
  transform: scale(1.1);
  z-index: 2; /* hover时层级高于其他容器 */
}

3. 修正代码中的小错误 #

• 拼写错误：font-wight改为font-weight
• 语法错误：rgba(0, 0, 0, 0.0, )删除多余逗号，改为rgba(0, 0, 0, 0)
• viewport标签错误：width-devicce-width改为width=device-width

可选优化：减少冗余代码 #

当前CSS存在大量重复类（如.box1/.box2、.image1/.image2），可以统一为通用类：

1. HTML中所有box1/box2等替换为box，image1/image2替换为image
2. CSS中删除所有带数字的.box/.image类，保留基础类即可：

.box {
  width: 250px;
  margin: 0 10px;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0);
  transition: .3s;
}
.box5 { /* 仅保留特殊宽度的类 */
  width: 200px;
}

.image {
  position: relative;
  /* 可根据需要给不同图片单独设置width，或在HTML中用style属性 */
}

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