Prototype Element.toggle on hover, disables with childElements

Question

I got the following situation: I got a table structure like this: ``` text text text

e e ``` What I'm doing with the following function is displaying the hidden span on hover of the table row. However it quirks whenever I hover the childElements inside the tr: the anchored image and the span itself. How can I fix this? ``` // Reveal item options on hover $$('#financedata tr').invoke('observe', 'mouseover', function(event) { event.target.up().childElements()[4].childElements()[0].toggle(); }); $$('#financedata tr').invoke('observe', 'mouseout', function(event) { event.target.up().childElements()[4].childElements()[0].toggle(); }); ```

Accepted Answer

Try the following:

```
$$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    this.up('tbody').childElements()[4].childElements()[0].toggle();
});
```

The key is using "this". With Prototype, "this" will always be the element the event is bound to, whereas event.target (which you shouldn't use as it is not cross-browser) and event.findElement() will be the actual element that the event occurred on. The .up('tbody') is merely a personal preference, and ensures that you are selecting the parent tbody, and nothing else. Try it with or without.

Read: http://www.prototypejs.org/api/event/observe for more information and examples on how Event bubbling works.

Prototype Element.toggle on hover, disables with childElements

Solution

Problem