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”上，那么关于 div 应该显示在左边，如果我把鼠标放在“ram”上，那么关于 div 应该显示在左边，如果我把鼠标放在“lilly”上，那么应该显示关于 div留给它。

最后它应该像 jQuery Tooltip 一样工作。

Answer 1

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

p:hover span{display : block}

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