Hovering Div Shows a Hidden Div - Prototype

Question

I have three divs set up in the following way:

<div class="outer-div">
<div class="inner1"></div>
<div class="inner2" style="display:none;"></div>
</div>

I have the second inner div hidden via the inline style. What I am trying to accomplish is that when the outer div, or basically any of the content is hovered over then the inner2 would appear.

I am unfamilar with Prototype and having a terrible time trying to get my head around it. Missing jQuery but this time around Prototype is totally required.

Thanks in advance for any help!!

Answer 1

try something like:

$("outer-div").observe('mouseover', function() {
    $('inner2').setStyle({ display: 'block' });
});

Answer 2

Not too different from the other answers, but I'm just using the inner1 class as the thing observed.

$$('.inner1').each(function(item){
    item.observe('mouseover', function(evt){
        evt.target.siblings()[0].show();
    });
});

• http://www.prototypejs.org/api/utility/dollar-dollar
• http://www.prototypejs.org/api/enumerable/each
• http://www.prototypejs.org/api/event/observe
• http://www.prototypejs.org/api/element/siblings
• http://www.prototypejs.org/api/element/show