我仅在处理一个所需的悬停效果时看到实现此目的的解决方案,但我想拥有四个子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。
最佳答案
虽然实际的父选择器无法通过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; }
并且父级的伪背景会在悬停时发生变化!
唯一要知道的是,在父级和具有后台 Angular 色的元素之间不应存在任何具有非静态位置的元素。
Here is the live example at dabblet
关于html - 将鼠标悬停在各个子div上时,将父div更改为其他背景,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13555255/