6

行のテーブルがあり（duh）、列の1つに、ホバー/マウスオーバー中に2つのボタンを表示させようとしています。現在、これは幅/高さが設​​定され、背景の配置が設定されたアンカータグです。

これは、非表示にしない場合の外観です。

完成品の良い例は、groovesharkのホバーコントロールです。

基本的に、現在ホバーされている画像を除いて、すべての画像を非表示にするにはどうすればよいのでしょうか。次に、その行にはそれらの画像が表示されますが、マウスが別の行に移動すると消えます。

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();
});
4

2 に答える 2

23

行のテーブルがある場合 (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>
于 2012-04-15T02:34:06.517 に答える
7

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>
于 2012-08-16T20:34:27.970 に答える