Question

我有一张桌子，在我的桌子行中，每一行都有一列我希望在鼠标悬停时显示图像并隐藏起来。

这是我的表格代码。

<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属性来实现此目的。

Answer 1

试试这个：

http://jsfiddle.net/tuaaD/

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

要在不使用td中的课程的情况下使其有效，请参阅this http://jsfiddle.net/tuaaD/1/

Answer 2

使用$(this)获取当前元素并使用find方法让孩子获得

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

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

Answer 3

使用$(this)和find()：

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

使用$this，您将仅对您悬停的元素执行此功能，并使用find()获得您需要的子元素。

Answer 4

轻微更改Arvind07的答案会让您将鼠标悬停在该行上并且不使用任何类名。

http://jsfiddle.net/vP8g4/

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

鼠标悬停时显示和隐藏

4 个答案: