鼠标悬停期间在表行中显示/隐藏按钮
MCG*_*MCG 4 jquery html-table mouseover jquery-hover
我有一个行表(duh),在其中一列中,我试图在悬停/鼠标悬停期间出现两个按钮.现在,它是一个带有设置宽度/高度和背景位置的锚标签.
这是他们在不隐藏时的样子:
成品的一个很好的例子是groovehark的悬停控件:
基本上我想知道如何将所有图像隐藏起来,除了当前正在徘徊的行中的图像.然后该行将显示这些图像,但一旦鼠标移动到另一行就会消失.
Html代码:
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代码:
jQuery('td').live('mouseover', function () {
jQuery(this).closest("tr").find('a.rowOption').visible();
});
Sil*_*ian 22
如果你有行表(duh),你可以像这样使用CSS:
table#mytableofrows tr td a.button { display:none;}
table#mytableofrows tr:hover td a.button { display:inline-block;}
将适用于此标记:
<table id="mytableofrows" width="100%">
<tr><td> <a class="button">Hello yes this is dog</a> </td></tr>
</table>
- 谢谢，对其进行了一些更改，但完全可以根据需要工作！对于任何感兴趣的人，最终代码是：http://pastebin.com/H8x8r0vW (2认同)
尝试使用HTML5样式标记.
<!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>
| 归档时间： |
|
| 查看次数： |
17264 次 |
| 最近记录： |