Hi again, > 3. Unless you have to support IE6...
You could get the wrong impression from that statement, so just to clarify, I'm not suggesting you *don't* have to support IE6. IE6 still (!) has about 18% of the general market share[1], so despite Google's recent moves (which I hope work!), publicly-facing websites still need to think very hard about supporting IE6. I'm just saying, for apps where you don't have to worry about it (intranets where the company has upgraded; or you believe that your audience for whatever reason is more likely than most to have upgraded [programmming websites, for instance], etc.), it's nice that IE7+ and all the other major browsers support the :hover pseudo-class. :-) [1] http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2 -- T.J. On Apr 14, 11:10 am, "T.J. Crowder" <[email protected]> wrote: > 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 / comwww.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.
