CODEWITHSUNDEEP
htmlcsscss-selectorshoverpseudo-class
Alex Vasile
Alex Vasile

Reputation: 73

Hide sibling div on hover with css only

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?

Upvotes: 3

Views: 10097

Answers (2)

dippas
dippas

Reputation: 60603

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>

Upvotes: 7

Michal
Michal

Reputation: 5226

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

  1. When you hover above <a>
  2. Target closest/sibling div.
  3. Using your setup you can move the target element around only when using javascript.
  4. 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>

Upvotes: 3

Related Questions