将鼠标悬停在单个子 div 上时，将父 div 更改为不同的背景

Posted 2023-05-08

【中文标题】将鼠标悬停在单个子 div 上时，将父 div 更改为不同的背景

【英文标题】：Change parent div to a different background when hovering over individual child divs

【发布时间】：2012-11-13 08:43:28

【问题描述】：

当我只处理一个所需的悬停效果时，我看到了实现此目的的解决方案，但我希望有四个子 div，每个子 div 都会更改主父 div 背景为单独的图像。

我假设这在 CSS 中是不可能的。

<div id="buttonBox">
   <div id="schedBox">
     <a href="#">Schedule</a>
   </div>
   <div id="transBox">
     <a href="#">Transformation</a>
   </div>
   <div id="destBox">
     <a href="#">Destination</a>
   </div>
   <div id="inspirBox">
     <a href="#">Inspiration</a>
   </div>
</div>

或者，我可以让每个子 div 有不同的背景。悬停一个子 div 会将所有子 div 背景更改为单独的颜色，但我不知道如何将鼠标悬停在第二个 div 上会影响前一个 div .. 只有后续兄弟姐妹。

【问题讨论】：

阅读以下内容：***.com/questions/45004/… 和 ***.com/questions/1014861/…

【参考方案1】：

虽然无法通过 CSS 实现实际的父选择器，但您可以使用额外的元素和定位来“破解”它。

您需要根据悬停的元素更改背景 — 好的！让我们添加伪元素（如果需要 IE 支持，也可以添加普通元素）并使用绝对定位和正向 z-index 将它们定位在父元素上：

#buttonBox 
    position: relative;
    z-index: 1;


#buttonBox > div:before 
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;

那些定位的元素应该有负的z-index，所以它们会被放置在所有其他内容之下，但在父元素的背景之上。

这样你可以添加类似的规则

#schedBox:hover:before   background: lime;   
#transBox:hover:before   background: red;    
#destBox:hover:before    background: orange; 
#inspirBox:hover:before  background: yellow; 

并且父级的伪背景会在悬停时改变！

唯一要知道的是，在父元素和具有背景角色的元素之间不应该有任何具有非静态位置的元素。

Here is the live example at dabblet

【参考方案2】：

是的，这是可能的。试试这个：

#schedBox:hover, #buttonBox
   background: red;


#schedBox:hover
   background: green;

【参考方案3】：

遗憾的是，CSS 中没有父选择器。

你必须使用 javascript 来实现你想做的事情。