Question

我已经创建了一个虚构的订单表格，其中包含由jQuery提供支持的工具提示......当您将鼠标悬停在您可以选择的汤的标签上时，工具提示会显示自己并提供有关汤的一些信息（我从中提取数据）来自php文件的服务器 - 将在问题结尾处给出源代码）。我正在使用循环机制来偏移工具提示，这样当你下到其他汤的标签并将鼠标悬停在它们上面时，它们每次都会被特定的数量偏移。

现在这就是问题所在......你可以将每一个悬停一次并且工作正常，但是如果再次检查它们，工具提示会一直向下和向下显示，直到它们完全消失。我知道这与我的循环结构有关但我无法弄清楚如何在这种情况下终止它并将偏移量增量设置回原始值（所以如果你想再次悬停它们，工具提示会出现在同一个当你第一次将鼠标悬停在它们上面时的位置。）

我刚刚开始学习jQuery，在过去两周内一直在查看他们的库，看起来相当复杂，出于某种原因我有时会把它与标准的Javascript甚至Java和PHP混淆，所以如果问题结束我很抱歉微不足道（无论如何对经验丰富的jQuery编码器）。

我已将表单上传到我的主持人，这样您就可以查看表单，亲眼看看会发生什么，您可以在http://www.interkiwiwebdevelopers.com/code-examples/scarfiesoupshack/查看该页面。当您到达页面时，只需将鼠标悬停在每个汤名称上，您将看到前面所述的信息。正如我之前所说的，它似乎在第一次悬停在每个上面时工作正常，但是在第二次和随后的每次悬停之后，它们只是在页面上显得越来越低而不是返回到它们的原始位置。您可以查看除“soupsInfo.php”文件之外的所有文件的源代码（这在文件“scarfiesoupshack.js”中使用），将在下面显示：

<?php

/*
* soupsInfo.php: this php script uses a switch-case statement to echo out a string
* describing the soup, of whose "soup_id" is in the GET query string eg:
*
* If you hover over the "Pumpkin Soup" label (whose soup_id would be "pumpkin"), 
* the text that would be echoed out (and displayed in the "hidden" div) would be
* "A delicious creamy pumpkin soup".
* 
* Refer to line 24 in "scarfiesoupshack.js" to see where the GET
* query string is being created.
*/


if (isset($_POST['soup_id'])){
// get soup_id value
$soup_id = $_POST['soup_id'];
switch($soup_id){
case "pumpkin":
echo ("<p style=\"margin-top:0px;\">A delicious creamy pumpkin soup</p>");
break;
case "chicken";
echo ("<p style=\"margin-top:0px; opacity:1.0;\">A flavoursome chicken soup</p>");
break;
case "clam":
echo ("<p style=\"margin-top:0px;\">Fresh clam soup from the ocean</p>");
break;
case "harira":
echo ("<p style=\"margin-top:0px;\">Whats harira?</p>");
break;
default:
echo ("<p style=\"margin-top:0px;\">What is this soup?</p>");
}
}
?>

对我解释这个问题如此密集的道歉，我不知道如何以一种紧凑的方式解释它...

提前致谢:)。

Answer 1

你问题就在这一行：

$(".tooltip").css("top", "+=33")

这意味着从顶部获取当前偏移量并为其添加33。基本上你正在使一个元素出现在顶部（相对于父元素），并且每个悬停都将它向下移动33个。相反，你应该将tooltop的“顶部”移动到元素的“顶部”上方（加上一些如果你愿意，可以补偿。

为此，鼠标悬停后，检索悬停在上面的元素的位置：

elem_top = $(this).position().top;

然后使用它来定位工具提示。

需要一些jQuery工具提示的帮助

1 个答案: