鼠标悬停#first时修改#outer背景色及透明度的CSS问题解决

问题根源 #

你写的 #first:hover #outer 根本不会生效——CSS里没有能直接选择父元素的语法，这个选择器是在找#first的后代里的#outer，但实际#outer是它的父元素，完全匹配不上。而且当鼠标放在#first上时，#outer的:hover状态也会触发（子元素的hover会冒泡触发父元素的hover），所以此时#outer还是会应用原来的hover样式。

解决办法 #

用CSS的:has()伪类就能搞定，它专门用来选择包含特定子元素的父元素。我们可以用#outer:has(#first:hover)来选中内部#first被hover的#outer，直接覆盖它的hover样式。

修改后的完整代码 #

body  {
    background-color: darkgray;
    font-size: 2em;
 }

div  {
    margin: 2em;
}

#outer  {
    background-color: purple;
    border: 2px solid transparent;
}

#outer:hover  {
    cursor: pointer;
    opacity: 40%;
    border: 2px solid yellow;
}

#first:hover  {
    color: red;
    font-weight: bold;
    cursor: pointer;
}

/* 替换原来无效的选择器 */
#outer:has(#first:hover) {
    background-color: green;
    opacity: 100%;
    /* 边框可保留黄色，也可按需修改 */
}

<div id="outer">
    Outer

    <div id="first">
        First
    </div>
</div>

注意事项 #

• :has()目前已被Chrome、Edge、Firefox 121及以上版本支持，主流现代浏览器都能正常使用，完全不需要JavaScript。
• 要把这个新规则放在#outer:hover的后面，因为同优先级的CSS规则，后面的会覆盖前面的。

内容的提问来源于stack exchange，提问作者parsecer