html - 仅使用 css 在悬停时隐藏同级 div

Question

我对一种让 CSS(无 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

更新 你不能用你当前的标记在 CSS 中实现你想要的，因为 CSS 没有父 CSS 选择器，检查 Is there a CSS parent selector? , 所以两个选择:

• 通过 JS 实现
• 更改您当前的标记，使将要悬停和被悬停的元素成为 sibling (就像您之前的示例和我在下面的回答)

---

您可以使用 adjacent sibling selector +

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

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

如果他们之间有额外的 sibling ，您可以使用 general sibling selector ~ 不太严格

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