更改同级元素的CSS

Question

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

我已经阅读了有关此问题的一些问题，甚至尝试了尼古拉斯·金（http://jsfiddle.net/2NEgt/3/）的示例，它是该主题的答案：CSS :hover on other element?

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

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

谢谢你。

https://jsfiddle.net/jhcv1462/1/

#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>

Answer 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 div {
    border-bottom: none;
}

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

Answer 2

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

所以Option 2是Option 1的同级，因为它具有相同的父代并且位于Option 1的后面。

但是Option 1不是Option 2的同级，因为Option 1在Option 2之前。

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

或者，您可以像现在一样使用+ CSS选择器选择紧随元素之后的第一个同级。

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

Answer 3

您可以通过定位父级来实现。即使两个以上的孩子也可以使用。