更改兄弟元素的 CSS [重复]答案

【问题标题】：Changing CSS of Sibling elements [duplicate]更改兄弟元素的 CSS [重复]
【发布时间】：2019-10-15 12:46:58
【问题描述】：

当您将鼠标悬停在“.option 2”上时，我试图让“.option 1”上的边框底部消失。

我已经阅读了一些关于这个问题的问题，甚至尝试了 Nicholas King (http://jsfiddle.net/2NEgt/3/) 的一个例子，它是这个主题的答案：CSS :hover on other element?

更改他的代码后，我注意到如果我在“.option1”上执行此操作以删除“.option2”上的边框，则可以执行此操作，但如果相反则看不到相同的内容。对此有解释吗？因为它们都在同一个 div 中，所以它们应该是兄弟元素还是我想错了？

非常感谢对此问题的解释，如果可能的话，提供不需要 JS 的解决方案。

提前谢谢你。

#nav_bar {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  color: black;
  display: flex;
  flex-direction: row;
}

.nav {
  width: 100%;
  height: 50px;
  transition: 0.33s;
  text-align: center;
  cursor: pointer;
}

.option1 {
  border-bottom: 2px solid #4387ff;
}

.option2:hover {
  border-bottom: 2px solid #4387ff;
}

.option2:hover+.option1 {
  border: none;
}

<div id="nav_bar">
  <div class="nav option1">
    <h2>Option 1</h2>
  </div>
  <div class="nav option2">
    <h2>Option 2</h2>
  </div>
</div>

【问题讨论】：

查看此演示：jsfiddle.
谢谢Akinuri！

标签： html css

【解决方案1】：

Luze 的答案是正确的。兄弟姐妹~ 只寻址后面的兄弟姐妹...而不是前面的。

希望当兄弟姐妹吵架时：您可以向他们的父母表达自己...

这是一些工作代码：

#nav_bar{
    margin-left: auto;
    margin-right:auto;
    position:relative;
    color:black;
    display:flex;
    flex-direction: row;
}

.nav{
    width:100%;
    height:50px;
    transition:0.33s;
    text-align: center;
    cursor:pointer;
}

#nav_bar .option1 {
    border-bottom:2px solid #4387ff;
}

#nav_bar:hover .option1 {
    border-bottom: none;
}

#nav_bar .option1:hover {
    border-bottom:2px solid #4387ff;
}

#nav_bar .option2:hover,
#nav_bar .option2:hover ~ .option1 {
    border-bottom:2px solid #4387ff;
}

/* #nav_bar .option */

【讨论】：

谢谢，它确实有效。但是，当您将 option1 悬停时，option1 和 2 都会获得边框。
我相应地编辑了我的答案

【解决方案2】：

siblings 仅被视为您元素之后的元素。

所以Option 2 是Option 1 的兄弟，因为它具有相同的父级并且在Option 1 之后。

但是Option 1 不是Option 2 的兄弟，因为Option 1 在Option 2 之前。

您可以使用~ CSS-selector 选择所有同级（元素之后的所有同级）

或者您可以使用+ CSS-selector 选择紧跟在您的元素之后的第一个同级，就像您目前所做的那样。

但遗憾的是，目前在 CSS 中无法在元素之前选择 sibling。不过，您可以尝试做类似this 的事情。此人确实找到了解决此问题的方法，可能对您的情况有用。

【讨论】：

【解决方案3】：

您可以通过定位父级来完成此操作。即使有两个以上的孩子，这也适用。

JSFiddle

#nav_bar {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: black;
    display: flex;
    flex-direction: row;
}

.nav {
    width: 100%;
    height: 50px;
    text-align: center;
    cursor: pointer;
}

/* option1 is selected by default */
.option1 {
    border-bottom: 2px solid #4387ff;
}

/* remove all borders when the parent is hovered */
#nav_bar:hover .nav {
    border-bottom: none;
}

/* add border to the hovered child */
#nav_bar .nav:hover {
    border-bottom: 2px solid #4387ff;
}

<div id="nav_bar">
    <div class="nav option1">
        <h2>Option 1</h2>
    </div>
    <div class="nav option2">
        <h2>Option 2</h2>
    </div>
    <div class="nav option3">
        <h2>Option 3</h2>
    </div>
</div>

【讨论】：