0


我有一张桌子，在我的表格行中，每一行都有一列，我想在鼠标悬停时显示图像并在悬停时隐藏。

这是我的表格代码。

<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 属性的情况下实现这一点。

4

4 回答 4

4

尝试这个：

http://jsfiddle.net/tuaaD/

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

要使其在不使用类 in 的情况下工作td，请参阅此 http://jsfiddle.net/tuaaD/1/

于 2012-05-02T12:17:31.090 回答
2

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

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

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

于 2012-05-02T12:19:22.940 回答
1

使用$(this)和find()：

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

使用$this，您将仅在您悬停的元素上执行该函数，并find()获得您需要的子元素。

于 2012-05-02T12:20:13.210 回答
1

对 Arvind07 的答案稍作更改，您就可以轻松地将鼠标悬停在该行上，并且不使用任何类名。

http://jsfiddle.net/vP8g4/

$('tbody tr').hover(
    function() {
        $('a', this).first().show();
    },
    function() {
        $('a', this).first().hide();
    }
);​
于 2012-05-02T12:26:52.330 回答