CSS :has() 选择器的妙用：悬停效果的实现

在前端开发中，CSS 一直是我们页面样式的主要工具。随着 CSS 的不断发展，一些新的特性和选择器为开发者提供了更多的可能性。今天我们要探讨的是 CSS:has()选择器，通过一个实例来说明它在实现复杂悬停效果时的妙用。

实例背景

我们有一个段落，包含两个不同的部分，每个部分都需要在鼠标悬停时显示一个隐藏的div。问题在于，传统的 CSS 选择器无法直接选择父元素或兄弟元素，因此实现这个效果有些棘手。

传统方法的限制

在没有:has()选择器的情况下，我们会尝试使用相邻兄弟选择器（+）或通用兄弟选择器（~）来实现效果，但这通常需要 HTML 结构的特定排列。例如：

<pclass="show"