hover时实现前景文字淡出、背景文字淡入的CSS过渡效果问题排查

算力阿峰

2026-10-8

问题根因

上层.location-wrapper的z-index为10，层级远高于下层的.location-text-wrapper，hover事件始终被上层元素捕获，下层元素绑定的hover规则永远不会触发。

修复方案

改为监听公共父容器.location-container的hover状态，同时控制上下两层元素的显隐过渡即可，修改后的完整代码如下：

修改后CSS

.location-container {
  position: relative;
  height: 200px;
  width: 100%;
  color: white;
}

.location-bg-image {
  position: absolute !important;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -1;
}

.location-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: 2s;
}

.location-overlay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 新增前景文字过渡效果 */
  transition: opacity 2s ease;
}

.location-city {
  padding-bottom: 60px;
  color: white;
  font-size: 25px;
  font-weight: 400;
}

.location-text-wrapper {
  height: 100%;
  padding-top: 40px;
  width: 100%;
  opacity: 1;
  display: flex;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}

.location-text {
  /* 颜色改为黑色，避免和上层白色半透背景冲突，可自行调整 */
  color: #000;
  font-size: 18px;
  opacity: 0;
  transition: 2s ease;
}

/* 新增父容器hover控制规则 */
.location-container:hover .location-wrapper {
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
}
.location-container:hover .location-overlay {
  opacity: 0;
}
.location-container:hover .location-text {
  opacity: 1;
}