マウスオーバー時にテーブル行のボタンを表示/非表示にする

テーブルの行（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(); 
});

出典

2012-04-15 MCG

'visible（）'はjquery関数ではありません...ああ、 'live（）'は廃止予定です。代わりに 'on（）'を使用してください。 – elclanrs

あなたが行（当たり前）のテーブルを持っている場合、あなたはこのように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-15 02:34:06

ありがとう、少し変更しましたが、必要に応じて正確に機能しました！関心のある人は、最終的なコードはhttp://pastebin.com/H8x8r0vW – MCG

です。 :) '：hover'はIE6では動作しません。 IE7では動作しますが、doctypeを置く必要があります（http://stackoverflow.com/questions/143296/problem-with-hover-in-ie7参照）。 –

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-16 20:34:27

マウスオーバー時にテーブル行のボタンを表示/非表示にする

答えて

関連する問題