CSS实现悬停grid网格元素时在地图背景上展示全屏叠加PNG图像

实现方案 #

核心逻辑是拆分「悬停触发区域」和「路线覆盖层」，避免路线PNG被网格子容器裁剪，通过CSS兄弟选择器实现悬停触发对应路线显示。 #

调整后HTML代码

<div class="route-container">
  <!-- 路线覆盖层 统一放置 -->
  <div class="route-overlay route-1"></div>
  <div class="route-overlay route-2"></div>
  <div class="route-overlay route-3"></div>
  <div class="route-overlay route-4"></div>
  <!-- 2*2悬停触发网格 -->
  <div class="trigger-area" id="trigger1"></div>
  <div class="trigger-area" id="trigger2"></div>
  <div class="trigger-area" id="trigger3"></div>
  <div class="trigger-area" id="trigger4"></div>
</div>

调整后CSS代码

.route-container {
    position: relative;
    width: 1623px;
    height: 765px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px;
    background: url('../images/route_map.jpg');
    background-size: cover;
}
/* 路线覆盖层通用样式 */
.route-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease; /* 平滑过渡动画 */
    background-size: cover;
    z-index: 1;
}
/* 各路线对应背景 */
.route-1 {
    background-image: url(../images/route_1.png);
}
.route-2 {
    background-image: url(../images/route_2.png);
}
.route-3 {
    background-image: url(../images/route_3.png);
}
.route-4 {
    background-image: url(../images/route_4.png);
}
/* 悬停触发区域通用样式 */
.trigger-area {
    background: transparent;
    z-index: 2; /* 层级高于覆盖层，保证能接收鼠标事件 */
    cursor: pointer;
}
/* 悬停触发对应路线显示 */
#trigger1:hover ~ .route-1 {
    opacity: 1;
}
#trigger2:hover ~ .route-2 {
    opacity: 1;
}
#trigger3:hover ~ .route-3 {
    opacity: 1;
}
#trigger4:hover ~ .route-4 {
    opacity: 1;
}

关键修改说明

• 父容器.route-container添加position: relative，作为内部绝对定位元素的定位基准
• 路线覆盖层独立出来，通过绝对定位撑满整个地图容器，不会被网格区域裁剪
• 触发区域设为透明且层级高于覆盖层，保证鼠标事件可以正常触发
• 修复原代码中CSS属性赋值错误（原写法opacity = 1应为opacity: 1）

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