Question

I’ve got a problem and I don’t get it:

I’ve got a table, each cell contains a small definition list and an anchor
so it would look like:

<table>
<tr>
    <td>
        <dl>
            <dt>Title</dt>
            <dd>Summary</dd>        
        </dl>
        <a>Link</a>
    <td>
</tr>
</table>

there are some more rows and colums but that should be enough 🙂

What I want is to show the hidden (using .hide()-Method) anchor if the mouse enters the dl or perhaps the td. Plus hiding all other anchors contained in not ‘mouseenter’ed td’s / dl’s.

I tried it with following function:

(function(){
    $('td').on('mouseenter', 'dl', function(){
        ($(this)
            .next());
            .show();
            .slideDown(300)
                .siblings('a')
                    .slideUp(300);

    })  
})();

Any idea what I’m doing wrong?
Could the problem be, that I create the tablecontent (tr’s and downwards) dynamic during runtime?
I’m glad for any advice.

Answer 1

Something like this should achieve what you want:

$(function() {  
    $('td').on('mouseenter', function() {  
        $(this).parents('table').find('a').slideUp(300);
        $(this).children('a').slideDown(300);
    });
});

See the jsFiddle here > http://jsfiddle.net/WR45L/.