jQuery 在鼠标悬停在span上时，在鼠标光标处显示DIV

在本文中，我们将介绍如何使用jQuery在鼠标悬停在span元素上时，在鼠标光标处显示一个DIV。这可以为用户提供更加直观和交互式的界面，增强用户体验。

实现方法

首先，我们需要定义一个包含鼠标悬停的span元素和要显示的DIV的HTML结构。这里我们假设我们有一个span元素和一个id为”popup”的DIV元素。

<span class="hover-span">悬停在我上面</span>
<div id="popup">要显示的内容</div>

接下来，我们需要使用jQuery来实现在鼠标悬停在span上时显示DIV的功能。我们可以使用mouseenter和mouseleave事件来处理鼠标的悬停和离开。

$(document).ready(function(){
   $(".hover-span").on("mouseenter", function(){
      // 在鼠标进入span元素时执行的代码
      var mouseX = event.pageX; // 鼠标光标相对于页面的X坐标
      var mouseY = event.pageY; // 鼠标光标相对于页面的Y坐标
      $("#popup").css({"top": mouseY, "left": mouseX}).show(); // 设置DIV的位置并显示
   }).on("mouseleave", function(){
      // 在鼠标离开span元素时执行的代码
      $("#popup").hide(); // 隐藏DIV
   });
});

在上述代码中，我们首先通过mouseenter事件来监听鼠标悬停在span元素上的动作。然后，在鼠标进入span元素时，我们获取鼠标光标相对于页面的坐标，并将DIV的位置设置为该坐标。最后，我们使用show()方法显示DIV。当鼠标离开span元素时，我们使用mouseleave事件和hide()方法来隐藏DIV。

示例

接下来，让我们通过一个简单的示例来演示上述功能。我们可以创建一个包含多个span元素的HTML结构，并在每个span元素上显示一个不同的DIV。

<span class="hover-span">悬停在我上面</span>
<div id="popup">这是一个示例1</div>

<span class="hover-span">悬停在我上面</span>
<div id="popup">这是一个示例2</div>

<span class="hover-span">悬停在我上面</span>
<div id="popup">这是一个示例3</div>

我们可以使用上述jQuery代码来实现在鼠标悬停在span元素上时显示相应DIV的功能。

$(document).ready(function(){
   $(".hover-span").on("mouseenter", function(){
      var mouseX = event.pageX;
      var mouseY = event.pageY;
      $(this).next("#popup").css({"top": mouseY, "left": mouseX}).show();
   }).on("mouseleave", function(){
      $(this).next("#popup").hide();
   });
});

在上述示例中，我们使用.next()方法来选择与鼠标悬停的span元素相邻的下一个元素，即要显示的DIV。

总结

本文介绍了如何使用jQuery在鼠标悬停在span元素上时，在鼠标光标处显示一个DIV。通过监听鼠标的mouseenter和mouseleave事件，我们可以实现这一功能。同时，我们还通过示例演示了如何在多个span元素上分别显示不同的DIV。这种功能可以提供更加直观和交互式的用户界面，提升用户体验。

尽管我们仅仅提供了一种实现方法，但是根据实际需求，你也可以对代码进行修改和改进，以适应不同的场景和要求。希望本文对你理解和运用jQuery实现DIV显示的功能有所帮助。