CODEWITHSUNDEEP
jqueryhover
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25763

display and hide on mouse hover


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.

Upvotes: 0

Views: 2086

Answers (4)

Marc Gagne
Marc Gagne

Reputation: 819

A slight change to Arvind07's answer easily gives you hover on the row and doesn't use any class names.

http://jsfiddle.net/vP8g4/

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

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

use $(this) and find():

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

Using $this, you will exec the function only on the element you hover and with find() you get exactly the children element you need.

Upvotes: 1

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5301

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/

Upvotes: 4

Shyju
Shyju

Reputation: 218892

use $(this) to get the current element and use find method to get the child a 

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

working sample : http://jsfiddle.net/LKKDZ/2/

Upvotes: 2

Related Questions