Hi,
`mouseover` and `mouseout` event bubble, and so when the mouse travels
over descendant elements of the element you're watching on, you get
`mouseover`s and `mouseout`s related to those descendant elements.
(This can be very handy, if you're using event delegation, but as
you're watching for the events on every row, it's messing up your
logic.)
You can solve this in three ways:
1. Use event delegation and watch for the events using handlers on
just one element (probably the table) and keep track of which row is
hovered in your handler logic. This has the advantage that you can add
and remove rows without worrying about hooking up and unhooking
handlers.
2. Use the `mouseenter` and `mouseleave` events instead. These are IE-
specific events that do *not* bubble, designed specifically for your
use case. Prototype kindly implements these events for you on browsers
other than IE. I think if you just change your code to use these
events, it'll suddenly start working, but I haven't read through it
very carefully to be sure.
3. Unless you have to support IE6, you can do this entirely with CSS;
no JavaScript required at all:
tr.hover_area a {
display: none;
}
tr.hover_area:hover a {
display: inline;
}
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Apr 14, 10:52 am, Jermaine <[email protected]> wrote:
> Hello Everyone,
>
> I'm trying to show/hide hyperlinks with Prototypejs whenever a user
> would hover a table row.
> The code that I've put together, works. You can paste it in and see it
> in action.
>
> The problem however, when I hover the table row the link becomes
> visible, but when I try to hover on that link, It disappears again.
> Pretty annoying.
>
> Any idea what I'm doing wrong here?
>
> <html>
> <head>
> <title>Show link on mouseover</title>
> <script type="text/javascript"
> src="http://ajax.googleapis.com/ajax/libs/prototype/
> 1.6.0.2/prototype.js">
> </script>
>
> <style type="text/css">
> table {width:100%;}
> td {border-bottom:1px solid #000;}
> </style>
>
> </head>
> <body>
>
> <table>
> <tr class="hover_area">
> <td>
> Foo: <span style="display:none"><a href="#">Bar</a></
> span>
> </td>
> </tr>
> <tr class="hover_area">
> <td>
> Foo: <span style="display:none"><a href="#">Bar</a></
> span>
> </td>
> </tr>
> </table>
>
> <script type="text/javascript">
>
> function show_link(event) {
> var elem = event.element().down('span').show();
>
> }
>
> function hide_link(event) {
> var elem = event.element().down('span').hide();
>
> }
>
> Event.observe(window, 'load', function() {
>
> $$(".hover_area").each(function(elem) {
> elem.observe('mouseover', show_link);
> });
>
> $$(".hover_area").each(function(elem) {
> elem.observe('mouseout', hide_link);
> });
>
> });
>
> </script>
>
> </body>
> </html>
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
