Table row highlight + tooltip with image

I'm trying to write a script that will

1. highlight table row and
2. show me tooltip with image whenever I'm on that row

HTML

<table>
    <tr class="thumbnail-item">
        <td class="column-1">1</td>
        <td class="column-2">2</td>
        <td class="column-3">3</td>
        <td class="column-4">4</td>
        <div class="tiptip"><img src="img.jpg" alt=""/></div>

    </tr>
</table>

jQuery

$(document).ready(function () {

 $('.thumbnail-item').mouseenter(function(e) {

  x = e.pageX;
  y = e.pageY;

  $(this).css('z-index','15')
  $(this).css('background', '#800000')
  $(this).css('color', '#ffffff')
  $(this).css('cursor', 'default')
  $(this).children(".tiptip").css({'top': y,'left': x,'display':'block'});


 }).mousemove(function(e) {

  x = e.pageX;
  y = e.pageY;

  $(this).children(".tiptip").css({'top': y,'left': x});

 }).mouseleave(function() {

  $(this).css('z-index','1')
  $(this).css('background', 'none')
  $(this).css('color', '#000000')
  $(this).children(".tiptip").animate({"opacity": "hide"}, 0);
 });

});

CSS

.tiptip
{
display: none;
position: absolute;
}

.thumbnail-item
{
position: relative;
}

Image somehow couldn't be shown. Will children() not 开发者_运维百科select elements if they are hidden?

You can only have table cells (<td>,<th>) in a table row (<tr>).
reference: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5

So use a cell and put your div in there, and use the .find() method to target it.

example at http://www.jsfiddle.net/gaby/egrMp/1

You aren't allowed to put a div element (block item) inside a table row.

All jQuery selectors select all elements, whether they are hidden or not.