テーブルに<tr>タグのツールチップを定義するのではなく、これを​​タグと混同しないでください

Question

私は、テーブル行をホバリングするときのヒントを得るための本当に簡単な例を探しています。ここでは、テーブルのセルではなく、テーブルの行全体を意味します。表のセルには多くの回答がありますが、表の行には適用できません。

私はこのようなものがあります：私が欲しいもの

<table> 
    <tr> 
     <td> item 1 <td> 
     <td> item 2 <td> 
    </tr> 
</table> 

は次のようなものです：

<table> 
    <tr> 
     <span class="tooltip"> tooltip text here </span> 
     <td> item 1 <td> 
     <td> item 2 <td> 
    </tr> 
</table> 

のCss：

をホバリングするとき、私はツールチップを追加することができますどのように

.tooltip { 
    display: none; 
    color: #000; 
    text-decoration: none; 
    padding: 3px; 
} 

.tooltip:hover { 
    display: block; 
    position: absolute; 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    margin: 2px 10px; 
} 

Answer 1

これは動作します

.tooltip { 
    display: none; 
    color: #000; 
    text-decoration: none; 
    padding: 3px; 
} 

tr:hover .tooltip { 
    display: block; 
    position: absolute; 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    margin: 2px 10px; 
} 

注：テーブル行のホバー状態をキャッチし、ツールチップの表示ブロックを設定しようとします。したがって、TR：ホバー状況でのみ、ツールチップが表示されます。ただし、テーブル行の後にスパンを使用することはお勧めできません。