@T.J: Thanks for the insights. I was already familiar with the css
only solution. But unfortunately I have to support IE6 for my users.
I've been playin around the couple of days and came up with a solution
in jQuery (see code below). It also works perfectly fine in IE6.

Just paste the code below in your texteditor and fire it up in your
browser to see how it works... pretty straightforward stuff.

Now I'm looking for a way to port this code to Prototype. Can anyone
help?


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js";></script>
</head>
<body>
        <ul>
    <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
li>
    <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
li>
    <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
li>
    <li>Foo  <span style="display:none"> <a href="#">Bar</a></span></
li>
  </ul>

<script>
$("li").hover(
  function () {
   $(this).find("span:first").css("display", "inline");
  },
  function () {
    $(this).find("span:last").css("display", "none");
  }
);
</script>
</body>
</html>

On 14 apr, 12:15, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> 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