Question

我有一个行表（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();
});

Answer 1

如果你有行表（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>

Answer 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>

鼠标悬停期间在表行中显示/隐藏按钮

2 个答案: