在处理只有一个希望的悬停效果时,我正在看到解决方案来实现这一点,但是我想要有四个子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 ..只有后来的兄弟姐妹.
解决方法
虽然实际的父选择器是不可能通过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; }
而父亲的伪背景将在悬停上改变！
唯一需要知道的是,不应该有父元素和具有后台角色的元素之间具有非静态位置的元素.
