Question

i have a table and in my table row there is one column for each and every row where i want to display an image on mouse hover and hide on hover out.

here is my table code.

<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>

there is an anchor tag with image in the first column of every row, which is hidden initially, i want to display the image on mouse hover for each element.

here is the jquery code i tried using.

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

the above code displays all the anchor tag, what i want is display only the corresponding element.

and also is there a way i could achieve this without using class or id attribute in <td> element.

Answer 1

Try this:

http://jsfiddle.net/tuaaD/

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

To make it work wihout using class in td, see this http://jsfiddle.net/tuaaD/1/