纯CSS实现鼠标悬停显示元素 跨父容器写法失效如何解决

选择器失效原因 #

+是相邻兄弟选择器，仅作用于同级且紧随其后的元素。你之前的写法.divtype1 .at:hover+.divtype2 .at2的匹配逻辑是「找.at悬停时紧跟在它后面的同级.divtype2下的.at2」，但实际结构中.at的同级没有.divtype2，.divtype1和.divtype2才是相邻的同级元素，因此选择器无法命中目标。

修正方案 #

方案1：纯CSS（悬停整个触发元素父容器生效） #

如果接受鼠标悬停在.divtype1的任意区域都触发显示效果，直接调整选择器位置即可：

html {
  background-color: beige;
}

.at2 {
  display: none;
}

.divtype1:hover + .divtype2 .at2 {
  display: block;
}

方案2：纯CSS（仅悬停触发元素本身生效） #

如果要求只有鼠标悬停在.at元素上才触发，不需要触发热区包含父容器空白区域，可以用目前主流浏览器均已支持的:has()选择器实现：

html {
  background-color: beige;
}

.at2 {
  display: none;
}

.divtype1:has(.at:hover) + .divtype2 .at2 {
  display: block;
}

注：:has()选择器在2023年之后已被Chrome、Firefox、Safari等主流浏览器正式支持，覆盖率超过90%，如果不需要兼容太老的浏览器可以直接使用。

方案3：JS兼容方案 #

如果需要兼容完全不支持:has()的旧版本浏览器，可以用少量JS实现相同效果：

const triggerEl = document.querySelector('.at')
const targetEl = document.querySelector('.at2')
// 鼠标移入触发元素时显示目标
triggerEl.addEventListener('mouseenter', () => targetEl.style.display = 'block')
// 鼠标移出触发元素时隐藏目标
triggerEl.addEventListener('mouseleave', () => targetEl.style.display = 'none')

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