Prototype Hover Content and Children

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>

Answer 2

Add a class to the div that you want to perform the toggle on. Then inside the event handler use this.select() to find children with that class name.

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

Event.observe(window, 'load', function() {  
    var lis = $$('li');

    var toggleFunc = function(event) {
        this.select('.hidden').toggle();
    }

    lis.observe('mouseover', toggleFunc);
    lis.observe('mouseout', toggleFunc);
});

Answer 3

A quick solution would be to use this plugin which adds "mouseEnter" and "mouseLeave" functionality for non-IE browsers.