I have tried the solution but so far it doesn't seem to work. I will
problem myself. I will comment again with more info if I cant get it
On May 6, 12:07 am, "T.J. Crowder" <
t...@crowdersoftware.com> wrote:
> Hi,
>
> If I'm understanding you, you want to hide the "inner2" divs, but then
> show them if the "outer-div" divs are hovered. The `mouseenter` and
> `mouseleave` events can help you with that:
>
> $$('div.outer-div').each(function(div) {
> div.observe('mouseenter', function() {
> this.down('div.inner2').show();
> });
> div.observe('mouseleave', function() {
> this.down('div.inner2').hide();
> });
> });
>
> You don't have to worry about two "inner2" divs showing at the same
> time unless the "outer-div" divs are overlapping, which I suspect they
> aren't, since `mouseleave` will fire to hide the previous one.
>
> What I used there:
>
> $$ to find the outer-divs[1]
> Enumerable#each to loop through them[2]
> Event#observe (indirectly through Element#observe) to hook up event
> handlers[3]
> Element#down to find the "inner2" div within the outer div[4]
> Element#show[5] and Element#hide[6]
>