0

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

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

当我在 Safari 5.0.1 上使用它时，它第一次工作，但随后的鼠标悬停会导致控制面板越来越多地移动看起来相同的增量。看起来 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>
4

1 回答 1

0

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

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

我仍然在 Firefox 中偏离了一个像素，但我会以其他方式解决这个问题。

于 2010-09-12T03:01:44.980 回答