仅使用 CSS 悬停时隐藏兄弟 div

Posted 2023-03-06

【中文标题】仅使用 CSS 悬停时隐藏兄弟 div

【英文标题】：Hide sibling div on hover with css only

【发布时间】：2016-10-31 06:32:37

【问题描述】：

我对一种使 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  src="square.png" />
    </a>
  </li>
  <li id="left" class="arrow">
    <a href="#">
      <img src="arrow.png" />
    </a>
  </li>
  <li id="left">
    <a href="#">
      <img  style="margin-left: -7px" src="refresh.png" />
    </a>
  </li>
  <li id="left">
    <a href="#">
      <img  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  src="settings.png" />
      </a>
    </li>
  </div>
</ul>

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

【参考方案1】：

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

通过 JS 实现 以将要悬停和悬停的元素是兄弟元素的方式更改当前标记（如您之前的示例和我在下面的答案）

---

你可以使用adjacent sibling selector+

#divid 
  display: none;

a:hover + #divid 
  display: block;

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

如果他们之间有额外的兄弟姐妹，您可以使用不那么严格的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>

【参考方案2】：

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

当您将鼠标悬停在<a> 上方时 目标最近/兄弟div。 使用您的设置，您只能在使用 javascript 时移动目标元素。 可以不能做到。

出现问题时显示：

我故意在#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>

片段：

#divid 
  display: none;

a:hover + #divid 
  display: block;

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

【讨论】：

这只是一个例子。我将编辑代码。只要它具有适当的类/ID，它就可以由您想要的任何元素组成。

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

请稍等。 :)

看我的帖子。也许你知道该怎么做:))

我刚刚编辑了我的答案。尝试将您的代码分解成更小的部分。慢慢添加complexit。例如：#fixed2 a:hover + .nav 将不起作用。因为“a”不是#fixed2 的兄弟。您正在尝试定位不存在的元素。