Наложение div на ячейку td с помощью jquery.position при событии наведения мыши - PullRequest
Новая
       25

Наложение div на ячейку td с помощью jquery.position при событии наведения мыши

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

У меня большая таблица только с числами и небольшим размером шрифта, что затрудняет просмотр.Увеличение размера шрифта не вариант, но я хочу добавить эффект увеличения (без необходимости использовать масштабирование в браузере), используя простое наложение div на наведенную ячейку td, если она имеет какой-либо контент.
Div должен быть центрирован наЯчейка td и содержимое div должны быть заменены на текстовое содержимое ячейки hd td.

Где моя ошибка?
Примечание. Я использую .delegate () вместо .hover() потому что я уже занимаюсь другими делами, требующими делегата.

HTML 

<div id="mine"><table border="1" cellspacing="2" cellpadding="2">
    <tr><td></td><td></td><td>1</td><td>2</td></tr>
    <tr><td>3</td><td></td><td></td><td>5</td></tr>
</table></div>
<div id="your">vale</div>

CSS 

#your {
    position: absolute;
    width: 40px;
    height: 30px;
    z-index: 100;
    border: 1px solid green;
    text-align: center;
    vertical-align: middle;
}

JS 

$(document).ready(function() {
  $('#mine').delegate('td', 'mouseover mouseleave', function(e) {
    if ($(this).text().length > 0) {
      if (e.type == 'mouseover') {
        $('#your').position({
          my: "center bottom",
          at: "center top",
          of: this,
          offset: "0 -20", // Place it above td cell
          collision: "none"
        });
        $('#your').clearQueue();
        $('#your').text($(this).text()).fadeIn(200);
      } else {
        $('#your').delay(300).fadeOut(200);
      }
    }
  });
});

Редактировать Я вижу, #your летит по всему месту при первом запуске, а затем несколько следующих паров, это работает,но затем он начинает появляться все странные места - в том числе за пределами #mine.

Ответы [ 2 ]

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

Использование оверлея div, который на больше , чем элемент, который он накладывает, было плохой идеей - это должно было быть где-то еще.
Вот что я в итоге сделал, разделив «наведение мыши»& "mouseleave" НЕ был возможен, из-за других предварительно сформированных вещей.

JS 

$(document).ready(function() {
  $('#mine').delegate('td', 'mouseover mouseleave', function(e) {
    if ($(this).text().length > 0) {
      if (e.type == 'mouseover') {
        var off = $(this).offset();
        $('#your').css({ // Using .position() was buggy. Styles ALWAYS works
          opacity: '', // Remove it if fadeOut didnt finish properly, eg too fast mouse movement
          left: (off.left -14)+'px', // 14 is half of box width
          top: (off.top -20 -37)+'px', // 37 is height of font within box. 20 is to place it above
        });
        $('#your').clearQueue().text($(this).text()).show(); // fadeIn wasnt really needed
      } else {
        $('#your').delay(900).fadeOut(150);  // long delay to allow moving mouse to another cell without box disappearing fast, else fade out fast
      }
    }
  });
});
0 голосов
/ 05 ноября 2010

Если ваша проблема - это мерцание, которое происходит, это потому, что он исчезает #your, когда вы покидаете td, который вы оставляете второй, появляется #your (потому что #your появляется под вашим курсором мыши в это время, так как вы зависаете прямо над td)

Способ исправить это - удалить mouseleave из #mine и создать отдельного слушателя для mouseleave специально для #your. Поэтому, когда ваша мышь уйдет #your, она исчезнет #your. 

$(document).ready(function() {
  $('#mine').delegate('td', 'mouseover', function(e) {
    if ($(this).text().length > 0) {
      if (e.type == 'mouseover') {
        $('#your').position({
          my: "center",
          at: "center",
          of: e,
          collision: "none"
        });
        $('#your').clearQueue();
        $('#your').text($(this).text()).fadeIn(200);
      }
    }
  });
});

$('#your').mouseleave(function() {
  $(this).fadeOut(200)
});

Кроме того, измените свой CSS так, чтобы #your не начинался видимым. 

#your {
    position: absolute;
    display: none;
    width: 40px;
    height: 30px;
    z-index: 100;
    border: 1px solid green;
    text-align: center;
    vertical-align: middle;
}
...