hover子元素改变父元素样式

如果想要通过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 元素的背景颜色将变为红色。

  •