在鼠標懸停上顯示和隱藏

我有一張桌子，在我的桌子行中，每行都有一列，我想在鼠標懸停上顯示圖像並隱藏在鼠標懸停之外。在鼠標懸停上顯示和隱藏

這是我的表代碼。

<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屬性。

來源

2012-05-02 Ibrahim Azhar Armar

試試這個：

http://jsfiddle.net/tuaaD/

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

爲了讓wihout在td使用類工作，看到this http://jsfiddle.net/tuaaD/1/

來源

2012-05-02 12:17:31

AHHA完美的作品。現在有什麼辦法可以在td元素中不使用class屬性的情況下達到相同的效果 –

@Ibrahim Azhar Armar這個工作在'td'中沒有'class'： [link]（http://jsfiddle.net/tuaaD/1/ ） –

它的工作原理，謝謝你Arvind –

使用$(this)來獲得當前元素，並使用find方法獲取孩子a

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

工作樣本：http://jsfiddle.net/LKKDZ/2/

來源

2012-05-02 12:19:22 Shyju

使用$(this)和find()：

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

使用$this，你將執行的是功能只有您將鼠標懸停在元素上，並與find()你正是你需要的兒童元素。

來源

2012-05-02 12:20:13

對Arvind07答案的輕微改動很容易讓你懸停在行上，並且不使用任何類名。

http://jsfiddle.net/vP8g4/

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

來源

2012-05-02 12:26:52

+1，很高興知道這:)，謝謝 –

在鼠標懸停上顯示和隱藏

回答

相關問題