请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
CSS交互最常用到的有设备指针移入移出，我们以此为例简单探讨一下如何利用CSS伪类来实现通过子元素的交互动作控制父元素。以下例子我们创建一个div元素，里面有两个不同类型的按钮和一个文本框，两个按钮在设备指针移到其上时都会改变div元素的背景色。看代码和效果：
<style>
.pa { margin: 20px autp; width: 600px; height: 80px; border: 1px solid gray; padding: 20px; }
.pa:has(button:hover) { background: tan; }
.pa:has(input[type=button]:hover) { background: beige; }
</style>
<div class="pa">
<button type="button">button按钮</button>
<input type="button" value="input按钮" />
<input type="text" value="text文本框" />
</div>
CSS代码中，类选择器 .pa 首先使用 :has 伪类进行查询，has是有的意思。第三行代码查询 button 元素，并给该元素一个指针滑过交互的伪类 :hover，总体意思是 .pa 之下的 button 的 hover 事件将会触发花括号设置的样式，{ background: tan; }，即设置父元素 .pa 的背景色；第4行代码原理与第3行一样，这个按钮是 input 按钮，input标签有很多类型，所以第3行的查询限制使用中括号指明类型；input文本框则没有在CSS中设置交互动作，指针移动到它那里啥事也不会发生。
具体来讲，子元素通过CSS交互控制父元素，由父元素选择器发出，它查询有没有指定的子元素，子元素可以是标签选择器（如上面演示示例的 button、input），也可以是类选择器（例如：.pa:has(.mybox:hover) {...}）和id选择器（例如：例如：.pa:has(#mypic:hover) {...}）等等合法的CSS实体选择器。
【附一】CSS交互父元素控制子元素： .pa:hover #son { background: green; }
【附二】CSS交互父元素控制所有指定子元素： .pa:hover > span { color: red; }
【附三】CSS交互同父元素下控制下一个兄弟元素：#son2:hover + #son3 { background: pink; }
【附四】CSS交互同父元素下控制后面所有兄弟元素：#son2:hover + div { background: gray; }
还有更多的此类操作，这里就不一一介绍了。
| 
发表于 2025-3-11 12:08
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-3-11 17:38
楼主
