Show/Hide Button in Table Row during mouseover

Asked 15/4, 2012 at 2:29 Answered 16/8, 2012 at 20:34

Solved jquery html-table mouseover jquery-hover

I have a table of rows (duh) and in one of the columns, I'm trying to have two buttons appear during hover/mouseover. Right now, it's an anchor tag with a set width/height and a background placement.

This is what they appear like when not hidden:

A good example of the finished product is grooveshark's hover controls:

Basically I'm wondering how I would go about getting all the images to be hidden except the ones in a row that is currently being hovered over. Then that row would show those images but disappear once the mouse moves to a different row.

Html Code:

echo '<td><a href="/servers/detail.php?id='. $row['id'] .'">'.$row['server_name'].'</a><a id="option-favorite" class="rowOption"></a><a id="option-vote" class="rowOption"></a></td>';

JS Code:

jQuery('td').live('mouseover', function () {
    jQuery(this).closest("tr").find('a.rowOption').visible();
});

Ulrica answered 15/4, 2012 at 2:29 Comment(1)

visible() is not a jquery function...Oh, and live() is deprecated, use on() instead. – Hesketh 15/4, 2012 at 2:33

When you have tables of rows (duh) you can use CSS like this:

  table#mytableofrows tr td a.button { display:none;}
  table#mytableofrows tr:hover td a.button { display:inline-block;}

Will work for this markup:

<table id="mytableofrows" width="100%">
    <tr><td> <a class="button">Hello yes this is dog</a> </td></tr>
</table>

Marten answered 15/4, 2012 at 2:34 Comment(2)

Thanks, changed it a bit but worked exactly as needed! For anyone interested, final code was: pastebin.com/H8x8r0vW – Ulrica 15/4, 2012 at 2:54

Nice anims. :) Note that :hover won't work in IE6. In IE7 it will work but you need to put a doctype (see https://mcmap.net/q/969708/-pseudo-class-hover-does-not-work-in-ie7). – Marten 15/4, 2012 at 5:14

Try using HTML5 style tag.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      table tr button { opacity:0; float:right }
      table tr:hover button { opacity:1 }
    </style>
  </head>

  <body>
    <table border=1 width=300px>
      <tr><td>LINE1 <button>BUTTON1</button></td></tr>
      <tr><td>LINE2 <button>BUTTON2</button></td></tr>
      <tr><td>LINE3 <button>BUTTON3</button></td></tr>
    </table>
  </body>
</html>

Masochism answered 16/8, 2012 at 20:34 Comment(0)

Recommended topics

Hot tags