Подсветка строки таблицы + подсказка с изображением - PullRequest
Новая
       20

Подсветка строки таблицы + подсказка с изображением

0 голосов
/ 18 ноября 2010

Я пытаюсь написать скрипт, который

  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() не выберет элементы, если они скрыты?

Ответы [ 2 ]

1 голос
/ 18 ноября 2010

В строке таблицы могут быть только ячейки таблицы (<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

0 голосов
/ 18 ноября 2010

Нельзя помещать элемент div (элемент блока) в строку таблицы.

Все селекторы jQuery выбирают все элементы, независимо от того, скрыты они или нет.

...