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" <t...@crowdersoftware.com> 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 <jermaine2...@gmail.com> 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 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