テーブルの行にマウスオーバーした際にボタンを表示させたい

Question

動的に作成されたn行のテーブルの中にinputのボタンがあります。

テーブルでマウスオーバーされた行のボタンだけ表示したいのですがうまく制御できません。
（追記）
うまく制御できません。→マウスオーバーしても表示されません。

<td>
  <input type="button" value="テスト" name="button" id="button" class="test" style="visibility: hidden;">
</td>

    $(document).on("mouseover",'#Table',function(){
        $('.test').show();
        console.log("hoge");
    });

バックグラウンドなどの色を変えるのはうまくいくのですがボタンの制御だけうまくできなくて試行錯誤しております。

よろしくお願いいたします。

Comments

[int32_t]

「うまく制御できません。」では問題を説明できていません。期待に反してどういう動作をするのでしょうか。

[TeraNayu]

追記いたしました。
回答よろしくお願いいたします。

Answer 1

JavaScriptなしで、以下のCSSでいかがでしょうか。

tr .test {
  visibility: hidden;
}

tr:hover .test {
  visibility: viisble;
}

Answer 2

<style>
tr:not(:hover) [type=button]{opacity:0}
</style>
<table>
<tr>
<td>test</td>
<td><input type="button" value="button"></td>
</tr>
<tr>
<td>test</td>
<td><input type="button" value="button"></td>
</tr>
<tr>
<td>test</td>
<td><input type="button" value="button"></td>
</tr>
</table>

Comments

[TeraNayu]

表に出せない部分などもあったので言葉不足な点もありましたが
こちらの書き方でうまくいきました！
ありがとうございました！

Answer 3

input要素に指定されているvisibility: hidden;が原因のように見えます。
jQueryのshowメソッド・hideメソッドでは、visibilityプロパティでなく、displayプロパティを操作しています。
今回は、showメソッドが実行されたときに、問題のbutton要素に、visibility: hidden;とdisplay: blockが同時に当たることになるのですが、この場合には結局要素は非表示になってしまうようです。

input要素のvisibility: hidden;をdisplay: noneに変更して、下記のようにしてはいかがでしょうか？
（テーブルの「行」にカーソルを置いたときにボタンを表示したいのでしたら、td要素にクラス名を振る方が良いように思います。table全体に当ててしまうと、表の中にカーソルが置かれたときに「全ての行の」ボタンが表示されてしまうかと思います）

<table>
  <tbody>
    <tr>
      <td class="td-has-button">テスト
        <input type="button" value="テスト" name="button" id="button" class="test" 
          style="display:none">
      </td>
    </tr>
  </tbody>
</table>

$(document).on("mouseover",'.td-has-button',function(){
  $('.test').show();
  console.log("hoge");
});

言うまでもないかもしれませんが、カーソルが外れたときに非表示にする処理は別途必要です。