Question

我感兴趣的是一种让div或:hover以外的元素展示CSS（无javascript）的方式，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

我很好奇，因为我想在你悬停某个菜单元素时制作一个东西，你会将搜索栏拉到浏览器的左边缘（它将是position: fixed;）

修改

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

这是实际的代码，因为答案无论如何都无法正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

UPDATE 你无法用你当前的标记在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>

Answer 2

修改在css选择器之间使用加号时，您实际上是这样说的：

当您将鼠标悬停在<a>
之上时
目标最近/兄弟div。

使用您的设置，只有在使用javascript时才能移动目标元素。

不可以完成。

显示事情何时中断：

我故意在<p>和#divid之间添加了<a>标记。现在我尝试将最接近的元素定位到#divid <a>，但它不是#divid { display: block; position: absolute; top: 50px; left: 50px; } a:hover + #divid { position: absolute; display: block; top: 20px; left: 20px; }。所以我的css打破了。

＆＃13;
＆＃13;
<a href="#">Hover me!</a> <p> P tag is in the way. </p> <div id="divid">Hello there, fellow friend!</div>
＆＃13;
#divid { display: block; position: absolute; top: 50px; left: 50px; } a:hover + #divid { position: absolute; display: block; top: 20px; left: 20px; }
＆＃13;
＆＃13;
＆＃13;

片段移动元素：

您需要尊重css选择器。尝试将代码分解为较小的部分，然后慢慢添加越来越多的复杂性。

＆＃13;
＆＃13;
<a href="#">Hover me!</a> <div id="divid">Hello there, fellow friend!</div>
＆＃13;
#divid { display: none; } a:hover + #divid { display: block; }
＆＃13;
＆＃13;
＆＃13;

<强>段：

＆＃13;
＆＃13;
<a href="#">Hover me!</a> <div id="divid">Hello there, fellow friend!</div>
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

隐藏兄弟div只能悬停在css上

2 个答案: