Question

我正在尝试编写一个

的脚本

突出显示表格行和
每当我在那一行时，向我展示带有图像的工具提示

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选择器都会选择所有元素，无论它们是否隐藏。

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

2 个答案: