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]

[1] http://api.prototypejs.org/language/dollardollar/ (that link will
only work for a little while, it *should* be 
http://api.prototypejs.org/dom/dollardollar/
but right now it's wrong)
[2] http://api.prototypejs.org/language/enumerable/prototype/each/
[3] http://api.prototypejs.org/dom/event/observe/
[4] http://api.prototypejs.org/dom/element/down/
[5] http://api.prototypejs.org/dom/element/show/
[6] http://api.prototypejs.org/dom/element/hide/

If you haven't already, it's very, very much worth your time to read
through the entire API front-to-back. It only takes about an hour.

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

On May 6, 2:05 am, Pixelflips <philliplovel...@gmail.com> wrote:
> I have a few sets of divs that contain three divs set up in the
> following way:
>
> <div class="outer-div">
> <div class="inner1"></div>
> <div class="inner2" style="display:none;"></div>
> </div>
>
> <div class="outer-div">
> <div class="inner1"></div>
> <div class="inner2" style="display:none;"></div>
> </div>
>
> <div class="outer-div">
> <div class="inner1"></div>
> <div class="inner2" style="display:none;"></div>
> </div>
>
> I have the second inner div of each hidden via the inline style. What
> I am trying to accomplish is that when the outer div of any, or
> basically any of the content is hovered over then the inner2 would
> appear but only one at a time within the outer-div.
>
> I am unfamilar with Prototype and having a terrible time trying to get
> my head around it.
>
> Thanks in advance for any help!!
>
> --
> You received this message because you are subscribed to the Google Groups 
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to 
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group 
> athttp://groups.google.com/group/prototype-scriptaculous?hl=en.

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to