Show/Hide Button in Table Row during mouseover
21,563
Solution 1
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>
Solution 2
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>
Author by
MCG
Updated on July 30, 2022Comments
-
MCG almost 2 years
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(); });
-
MCG about 12 yearsThanks, changed it a bit but worked exactly as needed! For anyone interested, final code was: pastebin.com/H8x8r0vW
-
Silviu-Marian about 12 yearsNice anims. :) Note that
:hover
won't work in IE6. In IE7 it will work but you need to put a doctype (see stackoverflow.com/questions/143296/problem-with-hover-in-ie7).