Скрыть div сестры на hover только css

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>

Snippet:

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

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