CSS悬停被强制-应用于孩子

.parent:hover .child {
    /* 父元素悬停时的通用样式 */
}

.child:hover {
    background-color: blue !important; /* 子元素悬停时的特定样式 */
}

<div class="parent">
    Parent
    <div class="child">Child</div>
</div>

document.querySelector('.child').addEventListener('mouseover', function() {
    this.classList.add('child-hover');
});

document.querySelector('.child').addEventListener('mouseout', function() {
    this.classList.remove('child-hover');
});

.child-hover {
    background-color: blue;
}

.parent:hover .child {
    /* 父元素悬停时的通用样式 */
}

.child:hover {
    /* 子元素悬停时的特定样式 */
}