在鼠标悬停事件中使用jquery.position将div覆盖到td单元上

我有一个只有数字和小字号的大表，这使得很难看清楚。增加字体大小不是一种选择，但我想提供一个类似缩放的效果（无需使用浏览器缩放），如果它包含任何内容，则在悬停的td单元上使用简单的div覆盖。
div应该以td单元为中心，div的内容应该替换为hdd单元格的文本内容。在鼠标悬停事件中使用jquery.position将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; 
}

$(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以外的地方。

来源

2010-11-05 Kim

究竟它是你的问题？我尝试了它，它的工作原理是，当你将鼠标悬停在某个物品上时，它会快速淡入/淡出，但定位效果很好。这是你遇到的问题吗？ – DaiYoukai 2010-11-05 05:54:42

我正在使用http://jsfiddle.net/来测试代码，但它没有在那里工作。在我的网站上工作..有点。查看编辑的代码。 – Kim 2010-11-05 14:07:16

我最初有同样的问题，只要确保您使用的是最新版本的JQuery和UI。 – DaiYoukai 2010-11-05 18:49:22

使用覆盖DIV，这比它覆盖是一个坏主意元素大 - 它必须是别的地方。
这是我最终做的分裂“mouseover”&“mouseleave”不是一个选项，由于其他事情的执行。

$(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 
     } 
    } 
    }); 
});

来源

2010-11-11 23:08:30 Kim

如果你的问题是发生在闪烁，那是因为你拥有它淡出#your当你离开td，你离开第二#your出现（因为在那个时候，因为你直接悬停出现在您的鼠标光标下#your在td）

办法解决这一问题是去除从#mine的mouseleave和mouseleave创建单独的收听者专门为#your。所以当你的鼠标离开#your它将fadeOut #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; 
}

来源

2010-11-05 06:02:50 DaiYoukai

在鼠标悬停事件中使用jquery.position将div覆盖到td单元上

回答

相关问题