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

Question

我对一种在不使用JavaScript的情况下展示div或元素的CSS方法感兴趣，例如：

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

为什么它不能正常工作，只是实际工作呢？

- Alex Vasile

Answer 1

更新：在你目前的标记中，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>

- dippas

Answer 2

编辑： 当在css选择器之间使用加号时，实际上是在说：

1. 当你悬停在 <a> 上方时
2. 目标最接近/兄弟节点的 div。
3. 使用您的设置，只有在使用javascript时才能移动目标元素。
4. 这是不可能的。

显示错误原因：

我故意在 #divid 和 <a> 之间添加了一个 <p> 标签。现在我想要定位最接近 #divid 的元素，应该是 <a>，但它并不是。所以我的css出现了错误。

#divid {
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
}
a:hover + #divid {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
}

<a href="#">Hover me!</a>
<p>
P tag is in the way.
</p>
<div id="divid">Hello there, fellow friend!</div>

移动元素的代码片段：

你需要遵守CSS选择器。尝试将你的代码分解成较小的部分，然后慢慢添加更多的复杂性。

#divid {
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
}
a:hover + #divid {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
}

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

Snippet:

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

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

- Michal

---

这只是一个示例，我将编辑代码。只要它有适当的类/ ID，它可以是任何元素。 - Michal

好的，我可以问你要实际的代码吗？因为我真的不明白。 - Alex Vasile

当然，请稍等一下。 :) - Michal

我刚刚编辑了我的回答。尝试将您的代码分解成较小的部分，逐渐增加复杂性。例如：#fixed2 a:hover + .nav 将不起作用。因为 "a" 不是 #fixed2 的兄弟元素。您正在尝试定位不存在的元素。 - Michal

我告诉过你，使用你的设置是不可能的，并解释了原因。 - Michal