Question

我有一个只有数字的大表和一个小字体，这让人很难看到。增加字体大小不是一个选项，但是如果有任何内容，我希望在悬停的td单元格上使用简单的div覆盖提供类似缩放的效果（无需使用浏览器缩放）。
div应该以td单元为中心，div的内容应该替换为悬停的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在第一次运行时飞到了整个地方，然后接下来的几个悬停它起作用，但随后它开始弹出所有奇怪的地方 - 包括外部{ {1}}。

Answer 1

如果你的问题是发生的闪烁，那是因为当你离开#your时你会让它淡出td，你会留下第二个#your（因为{{1}由于您直接悬停在#your）

上，因此当时显示在鼠标光标下方

解决此问题的方法是从td中删除mouseleave，并为#mine专门为mouseleave创建一个单独的侦听器。因此，当您的鼠标离开#your时，它将淡出#your。

#your

此外，更改您的CSS，以便$(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) });无法显示。

#your

Answer 2

使用叠加div，大于比叠加的元素是一个坏主意 - 它必须在其他地方。
这就是我最终做的分裂“鼠标悬停”和＆amp;由于其他事情的原因，“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
      }
    }
  });
});

在mouseover事件中使用jquery.position覆盖td单元格上的div

2 个答案: