使用 CSS 更改悬停时的兄弟姐妹状态答案

【问题标题】：With CSS change siblings state on hover使用 CSS 更改悬停时的兄弟姐妹状态
【发布时间】：2016-01-26 05:05:09
【问题描述】：

简单说明：如果元素是这个div的最后一个元素，我想改变兄弟的边框颜色。

更深入

结构

<div id="parent">
    <div id="child">
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
        <div class="grand-child"></div>
    </div>
    <div id="sibling"></div>
</div>

如果您将鼠标悬停在子 div 中的最后一个孙子上，我需要更改兄弟姐妹的边框颜色。

【问题讨论】：

悬停条件必须是#child 的特定子代，而不是#child 本身，这意味着仅靠CSS 是不可能的，因为没有父选择器。您必须使用 JavaScript 来植入此功能。
我正在研究这个问题，但我不知道是否有一种复杂的方法。 css-tricks.com/parent-selectors-in-css
不，即使在 CSS 选择器模块级别 4 下，尽管存在 :has()，这仍然是不可能的（到目前为止），因为似乎在“快速”选择器中省略了 :has()。跨度>
感谢您抽出宝贵时间与我讨论这件事，也许以后会发生一些事情。对我来说，这并不重要，只是表演技巧。

标签： css css-selectors hover siblings

【解决方案1】：

您是否尝试过使用:last-child css 选择器？在您的示例中，它可能看起来像这样：

div.grand-child:last-child:hover {
    border: 1px solid #000;
}

<div id="parent">
  <div id="child">
    <div class="grand-child">First item</div>
    <div class="grand-child">Second item</div>
    <div class="grand-child">Third item</div>
    <div class="grand-child">Fourth item</div>
    <div class="grand-child">Fifth item</div>
  </div>
  <div id="sibling"></div>
</div>

希望有帮助！

【讨论】：

猜您没有正确阅读问题 - 如果您将鼠标悬停在子 div 中的最后一个孙子上，我 需要兄弟姐妹边框改变颜色。
如果将鼠标悬停在“第五项”上，“第四项”的边框颜色会发生变化？