Question

在处理只有一个所需的悬停效果时，我看到了完成此操作的解决方案，但我希望有四个子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 ..只有后续的兄弟。

Answer 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

Answer 2

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

#schedBox:hover, #buttonBox{
   background: red;
}

#schedBox:hover{
   background: green;
}

Answer 3

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

您必须使用javascript来实现您想要的目标。

将鼠标div悬停在各个子div上时，将父div更改为其他背景

3 个答案: