css 用hover控制其父元素

在CSS中，通常情况下，`hover`伪类主要用于改变元素在其被鼠标悬浮时的状态，而直接作用于父元素并不是它的设计初衷。不过，有一些间接的方式来实现类似的效果，例如使用组合选择器或者JavaScript。以下是一些尝试：

1. **组合选择器**:
如果想让父元素响应子元素的`hover`状态，可以使用`:not()`结合`:hover`来实现部分父元素的样式变化：

   .parent:hover > .child:hover + .parent-element {
     /* 当子元素被悬停时，父元素的样式变化 */
   }

2. **事件委托** (借助JavaScript)：
使用JavaScript可以在父元素上添加`mouseover`和`mouseout`事件监听器，当子元素被悬停时触发相应动作：

   document.querySelector('.parent').addEventListener('mouseover', function(e) {
     if (e.target.matches('.child')) {
       this.classList.add('hovered');
     }
   });

   document.querySelector('.parent').addEventListener('mouseout', function() {
     this.classList.remove('hovered');
   });

然后在CSS里定义 `.parent.hovered` 的样式。

请注意，上述方法都不是标准的CSS语法，而是利用了CSS的一些扩展特性。实际应用中，如果可以直接作用于父元素，还是建议使用常规的`hover`伪类。