仅使用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选择器，请检查是否有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>

Answer 2

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

1. 当您将鼠标悬停在

   <a>

上方时
2. 目标最近/兄弟姐妹

   div

   。
3. 使用您的设置，您只能在使用 javascript 时移动目标元素。
4. 可以不可以完成。

出现问题时显示：

我故意在

<p>

和

#divid

之间添加了

<a>

标签。现在我试图定位最接近

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

Answer 3

这是我的建议：通过父元素上的变量设置子元素的

opacity

。将鼠标悬停在父级上时，将其设置为“0”，但在悬停的子级中覆盖它，如下所示：

.parent {
  --child-opacity: 1;
}
.parent:hover {
  --child-opacity: 0;
}
.child {
  opacity: var(--child-opacity, 1);
}
.child:hover {
  --child-opacity: 1;
}

<div class="parent">
  <div class="child">1. Hover me</div>
  <div class="child">2. Hover me</div>
  <div class="child">3. Hover me</div>
</div>

使用不透明度的原因是，当使用

display

（或

visibility

）隐藏子项时，它们将有效地从 DOM 中消失，并且不会接收任何指针事件，从而产生奇怪的行为。