Question

I am using:

    Event.observe(window, 'load', function() {  
$$('li').invoke('observe', 'mouseover', function(event) {
    this.children[0].toggle();
});

$$('li').invoke('observe', 'mouseout', function(event) {
    document.children[0].toggle();
});
    });   

<ul>
  <li>
    <div style="display:hidden;">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

To display a hidden div within an element when that element is moused over. It is partially working, however my code looks like the following:

When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why? I found this questions, but it doesn’t seem to work either for this context.

Answer 1

No need to use prototype or javascript for this, use css

li.item:hover div.entry {
 display:block
}

li.item div.entry {
 display:none
}

you don:t use any css classes in your example code, but I would strongly recommend you do so for this case

<ul>
  <li class="item">
    <div class="entry">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>