マウスのホバーでの表示と非表示

Question

私のテーブルの行には、マウスのホバー上に画像を表示し、ホバーの外に隠れたい各行ごとに1つの列があります。

ここは私のテーブルコードです。

<table cellpadding="0" cellspacing="0" border="0" class="display dTable"> 
    <thead> 
     <tr> 
      <th style="width:5%;"> &nbsp; </th> 
      <th style="width:10%;">Estimate#</th> 
      <th style="width:20%;">Reference</th> 
      <th style="width:30%;">Customer Name</th> 
      <th style="width:15%;">Date</th> 
      <th style="width:10%;">Amount</th> 
      <th style="width:10%;">Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="gradeA"> 
      <td class="context"> 
       <a href="#" title="" class="smallButton" style="margin:5px;display:none;"> 
        <img src="images/icons/dark/cog3.png" alt=""/> 
       </a> 
      </td> 
      <td align="center"><a href="#">EST-1</a></td> 
      <td align="center">Invoic 2,3</td> 
      <td align="center"><a href="#">Fahamco Distrubutions</a></td> 
      <td align="center">02-05-2012</td> 
      <td align="center">&yen;89800909</td> 
      <td align="center">pending</td> 
     </tr> 
     <tr class="gradeX"> 
      <td class="context"> 
       <a href="#" title="" class="smallButton" style="margin:5px;display:none;"> 
        <img src="images/icons/dark/cog3.png" alt="" /> 
       </a> 
      </td> 
      <td align="center"><a href="#">EST-1</a></td> 
      <td align="center">Invoic 2,3</td> 
      <td align="center"><a href="#">Fahamco Distrubutions</a></td> 
      <td align="center">02-05-2012</td> 
      <td align="center">&yen;89800909</td> 
      <td align="center">pending</td> 
     </tr> 
    </tbody> 
</table> 

画像とanchorタグが最初に隠されているすべての行の最初の列にある、私は、各要素のマウスホバー上に画像を表示します。

ここではjqueryコードを使用しています。

$('.context').hover(
    function() { 
     $('.context a').show(); 
    }, 
    function() { 
     $('.context a').hide(); 
    } 
); 

上記のコードでは、すべてのアンカータグが表示されますが、対応する要素のみが表示されます。

また、<td>要素のclass属性またはid属性を使用せずにこれを実現できる方法もあります。現在の要素を取得するためにthis http://jsfiddle.net/tuaaD/1/

Answer 1

これを試してみてくださいa

$(function(){ 
     $('.context').hover(
     function() { 
      $(this).find("a").show(); 
     }, 
     function() { 
       $(this).find("a").hide(); 
     } 
    ); 
    }); 
    ​ 

ワーキングサンプル：http://jsfiddle.net/LKKDZ/2/

Answer 2

使用$(this)を参照してください、

http://jsfiddle.net/tuaaD/

$('.context').hover(
    function() { 
     $(this).find('a').show(); 
    }, 
    function() { 
     $(this).find('a').hide(); 
    } 
); 

はそれがtdでクラスを使用してwihout動作させるために、子供を得るためにfindメソッドを使用します。

Answer 3

使用$(this)とfind()：

$('.context').hover(function() { 
     $(this).find('a').show(); 
    }, 
    function() { 
     $(this).find('a').hide(); 
    }); 

が$thisを使用して、あなただけのホバー要素の機能をexecしますとfind()であなたは正確にあなたが必要とする子どもの要素を取得します。

Answer 4

Arvind07の答えが少し変更されても、行にカーソルを合わせると簡単にクラス名は使用されません。

http://jsfiddle.net/vP8g4/

$('tbody tr').hover(
    function() { 
     $('a', this).first().show(); 
    }, 
    function() { 
     $('a', this).first().hide(); 
    } 
);​