Hide sibling div on hover with css only

Question

I am interested in a way of making CSS(no javascript) show off a div or an element outside of the one you :hover, like so:

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

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

I am pretty curious, because I want to make a thing while you hover a certain menu element, you will get the search bar drawn to the left edge of the browser(it'll be position: fixed;).

EDIT:

The above code was not actually whatI wanted, I think.

This is the actual code, since it doesn't work anyways by the answers.

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

Why doesn't it work properly and just actually work?

score 5 · Answer 1 · edited May 23 '17 at 10:29

UPDATE you can't achieve what you want in CSS with your current markup, because CSS doesn't have a parent CSS selector, check Is there a CSS parent selector?, So two options:

Do this via JS
Change your current markup in the way the element which is going to hover and be hovered are siblings (like your previous example and my answer below)

you can use the adjacent sibling selector +

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

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

if you have an extra siblings between them you can use the general sibling selector ~ which is less strict

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

Michal · Answer 2 · 2016-06-28T20:03:28.287

3

EDIT: When using the plus sign between css selectors you are actually saying that:

When you hover above <a>
Target closest/sibling div.
Using your setup you can move the target element around only when using javascript.
It can not be done.

Showing when things break:

I added <p> tag between #divid and <a> on purpose. Now I am trying to target closest element to #divid that should be <a> but it isn't. So my css breaks.

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

Snippet moving element around:

You need to respect css selectors. Try to break your code down to smaller pieces and then slowly add more and more complexity.

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

edited Jun 28 '16 at 20:03

answered Jun 28 '16 at 19:18

Michal

4,323
5
27
52

It is just an example. I will edit the code. It can by any element you want as long as it has a proper class/id. – Michal Jun 28 '16 at 19:24
Alright, can i ask you for the actual code, 'cause i really don't get it. – Alex Vasile Jun 28 '16 at 19:25
Sure give me a second. :) – Michal Jun 28 '16 at 19:28
look my post. maybe you know what to do :)) – Alex Vasile Jun 28 '16 at 19:40
I just edited my answer. Try to break your code down to smaller pieces. Add complexit slowly. For example: #fixed2 a:hover + .nav will not work. Because "a" is not a sibling of #fixed2. You are trying to target element that does not exist. – Michal Jun 28 '16 at 19:51
I cannot comment directly to your answers because I am currently trying to build my "reputation". – Michal Jun 28 '16 at 19:52
You can not achieve your goal without using jQuery. I can help you with jQuery though. It is really easy. – Michal Jun 28 '16 at 19:59
well i don't think i will even use css but i am a curious person and i was intruded about why doesn't this work.. and yes i will use javascript or jQuery because i cannot tell if a user scrolls down the page and make the menu smaller and modify it, but not right now, i am pretty sleepy(EU PST) – Alex Vasile Jun 28 '16 at 20:06
Why should it mark it if this is not answering to the question? – dippas Jun 28 '16 at 20:11
Well I told you it is not possible using your setup and explained why. – Michal Jun 28 '16 at 20:11

Hide sibling div on hover with css only

2 Answers2