jQueryを利用したツールチップを含む架空の注文フォームを作成しました...選択できるスープのラベルにカーソルを合わせると、ツールチップが表示され、スープに関する情報が表示されます（サーバーからデータを取得しています。 phpファイル-質問の最後にソースを提供します）。ループメカニズムを使用してツールチップをオフセットしているので、他のスープのラベルに移動してそれらにカーソルを合わせると、毎回特定の量だけオフセットされます。
ここで問題が発生します...それぞれを1回ホバーすると正常に機能しますが、もう一度上に移動すると、ツールチップが完全に消えるまでページの下に表示され続けます。ループ構造と関係があることはわかっていますが、この状況でループを終了してオフセット増分を元の値に戻す方法がわかりません（したがって、もう一度カーソルを合わせると、ツールチップが同じように表示されます）初めてホバーしたときの位置）。
私はこの2週間でjQueryを学び始めて、彼らのライブラリを調べています。それは非常に複雑に見え、何らかの理由で標準のJavascriptやJavaやPHPと混同することがあるので、問題が些細なものになってしまったことをお詫びします。 （とにかく経験豊富なjQueryコーダーに）。
フォームをホストにアップロードしたので、フォームを見て、何が起こるかを自分で確認できます。http：//www.interkiwiwebdevelopers.com/code-examples/scarfiesoupshack/のページを表示できます。このページが表示されたら、各スープの名前にカーソルを合わせると、前述の情報が表示されます。前に述べたように、最初にそれぞれにカーソルを合わせるとうまくいくように見えますが、2回目以降は、元の位置に戻るのではなく、ページ上で上下に表示され続けます。以下に表示される「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>");
}
}
?>
問題の説明が非常に密集していることをお詫びします。簡潔に説明する方法がわかりませんでした...
前もって感謝します ：）。