javascript - 在鼠标悬停时显示一个像 jQuery Tooltip 这样的 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(); 
        });
     });

知道鼠标悬停在 p 标签上时会显示一个 div，但它始终采用固定/绝对位置，但我想根据悬停元素显示它。

例子:

如果我将鼠标放在“jhony”上，那么 about div 应该显示在它的左边，如果我将鼠标放在“ram”上，那么 about div 应该显示在它的左边，如果我将鼠标放在 'lilly' 上，那么 about div 应该显示在它的左边。

最终它应该像 jQuery 工具提示一样工作。

Answer 1

为什么要使用 jQuery？你只能使用 css

p:hover span{display : block}

或者如果您想使用 jQuery/js，您必须计算从窗口顶部到 p 的高度并将其设置为您的 div:$(函数() {
$('p').hover(function() { $('#about').css('top',this.offset().top
)}