如何实现下拉菜单链接悬停时切换独立div的hero背景图

之前纯CSS选择器方案失效的核心原因是：触发hover的下拉链接嵌套在.hero-text容器深层，而要改背景的.hero-image是.hero-text的同级元素，传统CSS选择器没有向上回溯父级、再选择兄弟元素的能力，和使用Grid布局、嵌套层级深没有直接冲突，有两种成熟方案可选：

方案一：轻量原生JS实现（全浏览器兼容，优先推荐） #

不用修改现有HTML结构，几行代码就能搞定，逻辑非常直接：监听6个下拉链接的鼠标移入、移出事件，动态修改.hero-image的背景图即可。
代码示例：

// 配置每个链接class对应的图片地址，替换成你自己的图片路径即可
const bgMap = {
  img1: 'url(your-img-path-1.jpg)',
  img2: 'url(your-img-path-2.jpg)',
  img3: 'url(your-img-path-3.jpg)',
  img4: 'url(your-img-path-4.jpg)',
  img5: 'url(your-img-path-5.jpg)',
  img6: 'url(your-img-path-6.jpg)'
}
const heroBox = document.getElementById('hero-image')
// 保存默认背景，鼠标移出时还原
const defaultBg = heroBox.style.backgroundImage

// 给每个链接绑定交互事件
Object.entries(bgMap).forEach(([className, bgUrl]) => {
  const trigger = document.querySelector(`.${className}`)
  trigger.addEventListener('mouseenter', () => {
    heroBox.style.backgroundImage = bgUrl
  })
  trigger.addEventListener('mouseleave', () => {
    heroBox.style.backgroundImage = defaultBg
  })
})

想要切换效果更顺滑，可以给.hero-image加CSS过渡属性：

.hero-image {
  transition: background-image 0.25s ease;
  /* 保留你原本写的其他布局样式 */
}

方案二：纯CSS :has() 实现（无JS，仅支持现代浏览器） #

如果不需要兼容Chrome105以下、Safari15.4以下的老旧浏览器，可以用CSS新特性:has()实现，这个伪类可以检测父元素内部是否存在指定状态的子元素，不需要手动回溯DOM层级：
代码示例：

/* 匹配对应hover状态，切换背景 */
.parent:has(.img1:hover) .hero-image {
  background-image: url(your-img-path-1.jpg);
}
.parent:has(.img2:hover) .hero-image {
  background-image: url(your-img-path-2.jpg);
}
.parent:has(.img3:hover) .hero-image {
  background-image: url(your-img-path-3.jpg);
}
.parent:has(.img4:hover) .hero-image {
  background-image: url(your-img-path-4.jpg);
}
.parent:has(.img5:hover) .hero-image {
  background-image: url(your-img-path-5.jpg);
}
.parent:has(.img6:hover) .hero-image {
  background-image: url(your-img-path-6.jpg);
}
/* 同样可以加过渡效果 */
.hero-image {
  transition: background-image 0.25s ease;
}

注意：截至2024年:has()的全球浏览器覆盖率约90%，如果你的站点有大量低版本浏览器用户，直接选择JS方案更稳妥。

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