防止jQuery醉醺醺地将文档推到元素鼠标上方？
我正在尝试使用防止jQuery醉醺醺地将文档推到元素鼠标上方？,jquery,html,css,Jquery,Html,Css,我正在尝试使用tipsy 。。。将工具提示添加到页面。因此，我准备了下面发布的简单HTML示例-tipsy似乎在运行，但不幸的是，当我将鼠标移到元素上时，整个文档体被压下，这在视觉上非常令人恼火（此外，可能会导致焦点下的元素移动并丢失鼠标）；这可以在下面的gif上看到，它是在Ubuntu 14.04、Firefox 43上捕获的： 在tipsy元素上执行鼠标悬停操作时，如何防止整个文档被“推下” 测试代码： <html> <head> <meta ht
tipsytipsytipsy<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="../tipsy.css"/>
<style type="text/css">
#_help_refresh {
display:none;
}
</style>
<script type="text/javascript">
ondocready = function() {
// placeholder - nothing for now...
$("#_refresh").tipsy({fade: true, gravity: 's', html: true, title: function() {
return $("#_help_refresh").html();
}
});
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Testing tipsy ...</h1>
<div id="testholder">
<div>Some text here:</div>
<div>Some more text here:</div>
</div>
<span><img id="_refresh" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>
<span id="_help_refresh">Here is the help test that goes in the tooltip</span>
</body>
#_帮助你刷新{
显示：无；
}
ondocready=函数（）{
//占位符-暂时没有。。。
$（“##刷新”）.tipsy（{fade:true，gravity:s'，html:true，title:function（）{
返回$（“##_帮助_刷新”）.html（）；
}
});
}
$（文件）.ready（ondocready）；
测试醉酒。。。
这里有一些文字：
这里有更多的文字：
下面是工具提示中的帮助测试
margin block-end:0.67em
边缘块开始：0.67em
请注意，在这种情况下-当
是第一个时，Firefox会自动禁用边距块开始
；但是当其他元素位于
之前时，Firefox会自动启用边距块开始
因此，发生的情况是：开始时我们有..
，然后鼠标会移动，而酒醉的实际上会插入一个
，作为
的第一个孩子，因此我们有..
；因此，
不再是第一个子项，因此其边距块开始
被启用，因此内容的“下推”变得可见
没有CSS或JS或任何东西，最简单的修复方法是插入一个空的
（或其他元素）作为
的第一个子元素，即在
前面：
。。。
测试醉酒。。。
...
然后，由于
不再是第一个子项，它将从一开始就启用边距块开始
，因此，一旦插入相应的div
鼠标指针，则不会更改此设置。问题不在于html。这是一个插件。我运行了代码，注意到插件在文档顶部附加了工具提示。这会导致新添加的DOM元素在顶部占据一些空间，从而导致它下面的每个其他元素向下移动几个像素：看看tipsy.js
第34行的代码：
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
因此，当您将该行上的prependTo（）
方法替换为appendTo（）
tipsy在文档末尾添加了工具提示，防止在文档顶部添加新的DOM元素。因此，编辑源代码
编辑
如果您修复了特定的问题，那么如果您要在设计的其他地方调用插件，那么按照说明修改源代码可能会有所帮助。我相信在调用插件的代码的其他地方可能会出现问题，因为插件在DOM树的顶部添加了新元素。让插件在文档末尾添加这些元素应该可以限制您遇到的错误类型。我猜是\u help\u refresh
占用了从隐藏到显示的空间。试着给它visibility:hidden
而不是display:none
我正在Firefox上测试你的代码，它似乎工作得很好。谢谢你的建议，@GavinThomas-但不是这样，只是试了一下：无论如何都不会显示\u help\u refresh
，它只是工具提示数据的一个不可见容器（在我的实际代码中，我甚至不使用隐藏元素，我通过AJAX读取文件-我只是在这里添加了隐藏元素以快速模拟）谢谢@che azeh-它是什么Firefox版本，在哪个操作系统上？我上面的gif也是在Firefox中捕获的。。。你有插件吗？我会在Firefox安全模式下尝试，看看一些插件是否会有所不同。。。编辑：在Firefox43安全模式下尝试，同样的问题；同样在Firefox 45中（没有安装插件），同样的问题……谢谢@che azeh，但我不认为元素在顶部占用了太多空间，因为它是“位置：绝对”；当我将鼠标移到Firefox inspect元素中插入的div上时，只选择了工具提示矩形本身（因此问题不是插入的元素在顶部占用空间）。这里的问题是Firefox中
元素的默认行为，正如我在我的。然而，你的修正也是有效的。
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);