Question

我正在尝试一个想法。我有一块HTML文本，包括内嵌图像。一些图像将具有（我认为称之为）弹出窗口。也就是说，将鼠标悬停在图像上以在其左侧显示控制面板。将来，控制面板将切换显示模式，更改图像大小等。现在，我只想让它出现。当鼠标离开图像或控制面板时消失。

jQuery UI具有方便的“position”功能，几乎完全符合我的要求。

当我在Safari 5.0.1上使用它时，它第一次工作但随后的鼠标移动导致控制面板越来越多地移动看起来相同的delta。看起来position（）每次都会向面板应用一个偏移量，当我预期它会转到固定/静态位置时。

当我在Firefox 3.6.7上使用它时，图像和控制面板之间有1个像素的间隙。我希望img和div完全对齐，我认为这是位置点。

我需要做些什么才能让它每次都走到正确的位置？而且，这种技术被称为“飞出”，“天桥”还是其他一些术语？

这是我的代码

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
  border: 1px solid green;
  position: absolute;
  display: none;
}
img {
  border: 1px solid blue;
}
</style>
</head>

<body>
<div class="flyover">*</div>

<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script>

var is_shown = 0;

var check_for_close = function () {
  if (!is_shown) {
    $(".flyover").hide();
  }
};

// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
  is_shown = 0;
  setTimeout(check_for_close, 0.0);
};

$(document).ready(function () {
 $("img").mouseenter(function() {
   $(".flyover").position({my: "right top",
                            at: "left top",
                            of: $("img")});
    $(".flyover").show();
   is_shown = 1;
  }).mouseleave(check_exit);

  $(".flyover").mouseenter(function() {
    is_shown = 1;
  }).mouseleave(check_exit);
});
</script>
</body> </html>

Answer 1

我发现jquery forum thread表明这是“jQuery核心中已经修复但未发布的错误”。我有一个Safari问题的解决方法，就是使用nmyvision的注释并在每次调用位置之前重置位置，如

$(...).css({left:0,top:0}).position({ ... });

我仍然关注Firefox中的一个像素，但我会以其他方式解决这个问题。

使用jQuery UI进行内联图像弹出

1 个答案: