如何在鼠标悬停时创建一个弹出 div 并在使用 jQuery 单击时停留？

这是一个常见的需求：在鼠标悬停时创建一个弹出框，当用户单击时，弹出框会一直停留。下面将介绍使用 jQuery 实现这个功能。

HTML 结构

首先，我们需要一个 HTML 结构来描述弹出框。假设我们要弹出一个提示框，HTML 可以为下面这样：

<div id="tooltip">
  <p>这里是提示框的内容</p>
</div>

CSS 样式

接下来，我们为弹出框设定样式。这里只是给出了简单的样式，你可以自己定义更漂亮的样式：

#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  padding: 10px;
  background-color: #F8F8F8;
  border: 1px solid #CCCCCC;
  box-shadow: 5px 5px 5px #888888;
}

jQuery 代码

现在，我们可以编写 jQuery 代码实现弹出框的功能了。下面的代码会在鼠标悬停时创建弹出框，并在单击时停留：

$(document).ready(function() {
  // 鼠标悬浮事件
  $("#target").hover(function() {
    // 创建 tooltip
    var tooltip = $("<div id='tooltip'><p>这里是提示框的内容</p></div>");
    // 把 tooltip 插入到 body 中
    $("body").append(tooltip);
    // 计算 tooltip 的位置并显示
    var pos = $(this).position();
    tooltip.css({
      top: pos.top + $(this).outerHeight() + "px",
      left: pos.left + "px"
    }).fadeIn();
  },
  // 鼠标离开事件
  function() {
    // 移除 tooltip
    $("#tooltip").remove();
  });

  // 点击事件
  $("#tooltip").click(function() {
    // 停留
    return false;
  });
});

现在，当鼠标悬停在目标元素上时，就会弹出提示框。当用户单击时，提示框会一直停留。当用户离开元素时，提示框会自动消失。