表行突出显示+带有图像的工具提示

Question

我想写一个脚本

1. 突出显示表格行，
2. 显示工具提示与图像，每当我在该行

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

图像无法显示。如果元素是隐藏的，children()不会选择它们吗？

Answer 1

只能将表单元格(<td>、<th>)放在表行(<tr>)中。

参考资料：http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5

因此，使用一个单元格并将您的div放在其中，并使用.find()方法对其进行定位。

在http://www.jsfiddle.net/gaby/egrMp/1的例子

Answer 2

不允许在表行中放置div元素(块项)。

所有jQuery选择器都会选择所有的元素，不管它们是否隐藏。