如果想要通过hover子元素来改变父元素的样式,可以使用CSS的父选择器(Parent Selector)。父选择器的语法为:
parent > child {
/* Styles */
其中,parent是父元素的选择器,child是子元素的选择器。在上面的代码中,当鼠标悬停在子元素上时,父元素将应用相应的样式。
举个例子:
<style>
.container:hover > .box {
background-color: red;
</style>
<div class="container">
<div class="box">Hover over me to change the background color of my parent</div>
</div>
在这个例子中,当鼠标悬停在 .box 元素上时, .container 元素的背景颜色将变为红色。