CSS3 show a division on hover of another element

Question

I have the following code to show a division on hover. It is initially hidden and i'm trying to show one division on hover of another element.

 .topNav { padding: 1px 15%; background: #006cb4; color: white; } .mainMenu { list-style-type: none; } .mainMenu li { display: inline-block; padding: 3px 15px; font-size: 20px; } .mainMenu li a { text-decoration: none; color: white; } #item1 { display: block; } #item1:hover #item1detail { background: #444; visibility: visible; } #item1detail { position: absolute; top: 152px; left: 250px; background: #ccc; width: 750px; height: 400px; border: solid 1px black; border-radius: 0 0 10px 10px; visibility: hidden; } 

 <div class="topNav"> <ul class="mainMenu"> <li><a id="item1" href=""> item 1</a> </li> <li><a href=""> item 3</a> </li> <li><a href=""> item 4</a> </li> <li><a href=""> item 5</a> </li> <li><a href=""> item 6</a> </li> <li><a href=""> item 7</a> </li> <li><a href=""> item 8</a> </li> <li><a href=""> item 9</a> </li> </ul> <div id="item1detail"> Some random content </div> </div> 

on hover of the list item item1 i want to show the division itemdetail . The above code is not working. What am i doing wrong?

Answer 1

As I see it the only solution to display the given div without touching the HTML would be Javascript... As the others suggested already...

BUT... there's a solution with one slight change to your HTML and CSS each.

The main problem is this CSS-selector:

#item1:hover #item1detail

which would translate to "id item1detail INSIDE of an hovered id item1".

You can fix this by placing the div inside of the li and change the selector to:

#item1:hover + #item1detail

Since the div is positioned absolute anyway it doesn't make a visual difference... at least for your snippet...

Updated version of your snippet:

 .topNav { padding: 1px 15%; background: #006cb4; color: white; } .mainMenu { list-style-type: none; } .mainMenu li { display: inline-block; padding: 3px 15px; font-size: 20px; } .mainMenu li a { text-decoration: none; color: white; } #item1 { display: block; } #item1:hover + #item1detail { background: #444; visibility: visible; } #item1detail { position: absolute; top: 152px; left: 250px;background: #ccc; width: 750px; height: 400px; border:solid 1px black; border-radius: 0 0 10px 10px; visibility: hidden; } 

 <div class="topNav"> <ul class="mainMenu"> <li > <a id="item1" href=""> item 1</a> <div id="item1detail"> Some random content </div> </li> <li><a href=""> item 3</a></li> <li><a href=""> item 4</a></li> <li><a href=""> item 5</a></li> <li><a href=""> item 6</a></li> <li><a href=""> item 7</a></li> <li><a href=""> item 8</a></li> <li><a href=""> item 9</a></li> </ul> </div> 

Answer 2

You'll have to use javascript

<script>
function myFunction() {
            if (document.getElementById("item1detail").hidden==false){
                document.getElementById("item1detail").hidden = true;
            }else{
                document.getElementById("item1detail").hidden = false;
            }
        }
</script>

and

<div class="topNav">
  <ul class="mainMenu">
    <li><a id="item1" onhover="myFunction()" href=""> item 1</a>
    </li>
    <li><a href=""> item 3</a>
    </li>
    <li><a href=""> item 4</a>
    </li>
    <li><a href=""> item 5</a>
    </li>
    <li><a href=""> item 6</a>
    </li>
    <li><a href=""> item 7</a>
    </li>
    <li><a href=""> item 8</a>
    </li>
    <li><a href=""> item 9</a>
    </li>

  </ul>
  <div id="item1detail">
    Some random content
  </div>
</div>

Answer 3

I would do that using jQuery.

$('#item1').hover(function(){
  $('#item1detail').show();
}, function(){
  $('#item1detail').hide();
});

Answer 4

The reason your CSS isn't working is because you're using this selector:

#item1:hover #item1detail

Which selects the element with id #item1detail occurring within the element with id #item1 , if the #item1 element is hovered.

In your current markup, #item1detail is outside #item1 , and so does not match the selector. Moving #item1detail should get you the behavior you want. (And there will probably be some layout work to do from that point.)

Answer 5

The #item1detail element is not a sibling of the #item1 element, so that is why the #item1:hover #item1detail CSS rule does not apply as you expect it to.

I believe if this is to work with CSS only (not JavaScript), then you will have to make #item1detail a sibling of #item1 .