10

当只处理一个所需的悬停效果时，我看到了实现此目的的解决方案，但我希望有四个子 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 .. 只有后续兄弟姐妹。

4

3 回答 3

2

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

您需要的是根据悬停的元素更改背景 - 好的！让我们添加伪元素（如果您需要 IE 支持，则添加普通元素）并使用绝对定位和 positive 将它们定位在父元素上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; }

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

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

这是 dabblet 的实时示例

于 2012-11-28T12:56:16.533 回答
2

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

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

#schedBox:hover{
   background: green;
}
于 2012-12-24T23:53:05.057 回答
0

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

您将不得不使用 javascript 来实现您想要做的事情。

于 2012-11-25T22:25:32.120 回答