javascript - マウスをホバーすると、jQuery ツールチップのような div が表示されます

Question

以下のシナリオを考えてみましょう

 <p>jhony</p>
 <p>ram</p>
 <p>lilly</p>

 <div id="about"></div>

 <script>
      $(function() {
          $('p').hover(function() { 
             $('#about').show(); 
               }, function() { 
                   $('#about').hide(); 
        });
     });

divが表示するpタグにマウスを合わせるとわかりますが、常に固定/絶対位置を取りますが、ホバリング要素に関して表示したいです。

例：

「jhony」にマウスを置くと、約 div がその左側に表示されます。「ram」にマウスを置くと、約 div がその左側に表示されます。「lilly」にマウスを置くと、約 div が表示されます。それに任せた。

最後に、jQuery Tooltip のように動作するはずです。

Answer 1

なぜあなたはそれにjQueryを使うのですか? Uはcssのみを使用できます

p:hover span{display : block}

または、jQuery/js を使用する場合は、ウィンドウの上部から p までの高さを計算し、それを div に設定する必要があります。 $(function() { $('p').hover(function() { $('#about').css('top',this.offset().top )}