Show/Hide Different Divs Only

Question

I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:

<div id="main-nav">
 <ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
 </ul>
</div>

<div id="sub-nav">
 <ul>
  <li>SubItem 1</li>
  <li>SubItem 2</li>
  <li>SubItem 3</li>
 </ul>
</div>

The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.

#main-nav {
 width: 500px;
 height: 250px;
 background-color: black;
 display: block;
}

#sub-nav {
 width: 500px;
 height: 250px;
 background-color: white;
 display: none;
}

All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.

Can I do this using only CSS?

Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block

possible duplicate of [CSS: On hover show and hide different div's at the same time?](http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time) — Sifu, Jul 30 '14 at 13:02
You need some javascript to do this, cannot be done with CSS alone. There is no parent selector in css — Huangism, Jul 30 '14 at 13:05
This question is answered in comments and cannot be solved with css only — Huangism, Jul 30 '14 at 13:06
@volumeone it does not work since hovering anywhere in the overall container would trigger the show/hide. You won't even make it to the link and the show/hide will already occur — Huangism, Jul 30 '14 at 13:09

score 3 · Accepted Answer · answered Jul 30 '14 at 13:08

No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.

You could use css selectors like

#main-nav li:hover .sub-nav{}

or

#main-nav li:hover + .sub-nav{}

Alternatively you could use javascript

score -1 · Answer 2 · answered Jul 30 '14 at 13:02

-1

Why not just change the background color? Like this:

<div id="main-nav">
    <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
    </ul>
</div>

#main-nav:hover { background-color: black; }

Edit you can do exactly what you asked, but you'd need a wrapper for that:

<div class="navigation-wrapper">
    <div class="main">
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </div>
    <div class="sub">
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </div>
</div>

And in your css:

.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }

Fiddle demo

answered Jul 30 '14 at 13:02

giorgio

10,111
2
28
41

because then the content of the #sub-nav div wouldn't show – volume one Jul 30 '14 at 13:04
I see your updated question, to comment on that; with pure css it is not possible to trigger the effect on a parent when hovering over a child. You can achieve this result using javascript though – giorgio Jul 30 '14 at 13:08
Yea but, you can hover anything in your container and the show/hide would happen – Huangism Jul 30 '14 at 13:08
@Huangism yup that's exactly what my example does (checkout the fiddle) – giorgio Jul 30 '14 at 13:09
And for all the downvoters: could you please explain why this is a bad answer? IMO it answers the questioners needs, it's proper css, etc. Nothing wrong with downvoting btw! I'm curious though ;) – giorgio Jul 30 '14 at 13:10
@giorgio that's not what the question says, OP says hover any link then do this where in your answer I can hover on the empty space and the same thing would happen – Huangism Jul 30 '14 at 13:12
@giorgio I read the bit of the question where he refers to "an item". I took that to mean that different li hover's would generate a different background colour. Also you would never be able to click in anything in the first div making all links there useless – Adam Hughes Jul 30 '14 at 13:12

Show/Hide Different Divs Only

2 Answers2