Try this:

$$(".superlist li").invoke("observe", "mouseover", function(event) {
    alert(|Event.findElement(event, 'li')|.inspect().escapeHTML()

That should return the li element instead of a div.


> Hello everyone.
> I've basically got this HTML code:
> <ul class="superlist">
>   <li class="foo" id="bar">
>     <div class="foobar">some content</div>
>     <div class="content">some more content</div>
>     <div class="actions">some actions</div>
>   </li>
> </ul>
> and this JS code:
> $$(".superlist li").invoke("observe", "mouseover", function(event) {
>     alert(event.element().inspect().escapeHTML());
> });
> So now the thing is, that the event.element() method does NOT (as I
> would expect) return the <li> element, but any of the nested elements
> instead. Which might be a <div class="foobar"> or a <div
> class="content">.
> That results in two problems for me:
> 1. I want to toggle the visibility of li.actions for the li hovered.
> It shall become visible on mouseover and unvisible on mouseout. That
> doesn't work since anytime I move over one of the li's nested
> elements, the mouse-events get triggered. Although (from my point of
> view) I'm never leaving that element, since they are indeed children
> of the li.
> 2. (similar to the first one) I do always need to know which li
> element was hovered (so that I can determine which .actions div shall
> be toggled but don't know any good way to achieve this.
> I've run through similar problems like this several times but could
> never find a good solution.
> Hope anyone here can help me out :-)
> >

You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Reply via email to