在鼠标悬停时显示像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 )}