css阻止hover影响子元素

要阻止CSS的:hover伪类影响子元素，可以使用pointer-events属性。将pointer-events属性设置为none可以使鼠标事件无法穿透到子元素上。以下是一个例子：

<style>
    .parent {
        background-color: green;
        padding: 20px;
    }

    .child {
        background-color: red;
        padding: 10px;
        pointer-events: none;
    }

    .parent:hover {
        background-color: blue;
    }
</style>

<div class="parent">
    <div class="child">
        子元素
    </div>
</div>

在上面的例子中，当鼠标悬停在父元素上时，父元素的背景颜色会变为蓝色，但子元素的背景颜色仍然保持为红色。这是因为子元素的pointer-events属性被设置为none，使得鼠标事件无法穿透到子元素上。