仅使用CSS在悬停时隐藏同级div

Question

我对一种使CSS（no javascript）展示div您之外的或元素的方式感兴趣:hover，例如：

#divid {
  display: none;
}
a:hover #divid {
  display: block;
}

<a href="#">Hover me!</a>
<div id="divid">Hello there, fellow friend!</div>

我很好奇，因为当您将鼠标悬停在某个菜单元素上时我想做点事情，您会在浏览器的左边缘绘制搜索栏（它将是position: fixed;）。

---

编辑：

我认为上面的代码并不是我想要的。

这是实际的代码，因为答案始终无法正常工作。

#fixed2 a:hover + .nav {
  background: black;
}
#options:hover + #search_text {
  position: fixed;
  top: 0;
  left: 0;
}

<ul class="nav">
  <li id="left" class="big">
    <a href="#">
      <img width="35px" src="square.png" />
    </a>
  </li>
  <li id="left" class="arrow">
    <a href="#">
      <img src="arrow.png" />
    </a>
  </li>
  <li id="left">
    <a href="#">
      <img width="17px" style="margin-left: -7px" src="refresh.png" />
    </a>
  </li>
  <li id="left">
    <a href="#">
      <img width="18px" style="opacity: 0.94; margin-top: -1px;" src="help.png" />
    </a>
  </li>
  <div id="fixed">
    <li id="search">
      <form action="" method="get">
        <input type="text" name="search_text" id="search_text" placeholder="Search" />
        <input type="button" name="search_button" id="search_button">
      </form>
    </li>
  </div>
  <div id="fixed2">
    <li class="icn" id="options">
      <a href="#">
        <img width="25px" src="settings.png" />
      </a>
    </li>
  </div>
</ul>

为什么它不能正常工作而只能实际工作？

Answer 1

UPDATE， 您无法使用当前的标记实现CSS所需的功能，因为CSS没有父CSS选择器，请检查是否有CSS父选择器？，因此有两个选择：

• 通过JS做到这一点
• 以将要悬停和悬停的元素为同级元素的方式更改当前标记（例如您之前的示例和下面的答案）

您可以使用相邻的兄弟选择器 +

#divid {
  display: none;
}
a:hover + #divid {
  display: block;
}

<a href="#">Hover me!</a>
<div id="divid">Hello there, fellow friend!</div>

如果它们之间有额外的兄弟姐妹，则可以使用不太严格的常规兄弟姐妹选择器 ~

#divid {
  display: none;
}
a:hover ~ #divid {
  display: block;
}

<a href="#">Hover me!</a>
<div id="sibling">I'm sibling too</div>
<div id="divid">Hello there, fellow friend!</div>