如何在鼠标悬停p标签内的span元素时显示对应div

你的CSS代码失效的核心原因是选择器逻辑错误：

• 相邻兄弟选择器+只能匹配直接紧跟当前元素的同级元素
• .baz是<p class="bar">内部的<span>，它的同级是p标签里的文本内容，而.qux是<p class="bar">的同级元素，所以.baz:hover + .qux根本无法选中目标元素

下面是几种可行的解决方法：

方法1：利用父元素hover（简单但范围略宽） #

如果可以接受鼠标悬停在整个<p class="bar">区域都显示.qux，可以修改选择器为：

.qux {
    opacity: 0;
    transition: 0.3s;
}

.foo .bar:hover + .qux {
    opacity: 1;
}

原理：当鼠标悬停在.baz上时，会同时触发其父元素.bar的hover状态，此时用+选择器就能选中.bar的同级元素.qux。

方法2：使用CSS :has()选择器（精准匹配，现代浏览器支持） #

如果需要严格仅在.baz上hover时才显示.qux，可以用CSS的:has()选择器（Chrome 105+、Firefox 121+支持）：

.qux {
    opacity: 0;
    transition: 0.3s;
}

.foo:has(.baz:hover) .qux {
    opacity: 1;
}

原理：:has(.baz:hover)会选中包含hover状态.baz的.foo元素，再通过后代选择器选中内部的.qux。

方法3：JavaScript实现（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JS监听hover事件：

const baz = document.querySelector('.baz');
const qux = document.querySelector('.qux');

baz.addEventListener('mouseover', () => qux.style.opacity = '1');
baz.addEventListener('mouseout', () => qux.style.opacity = '0');

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