如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留

当使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留时，我们可以使用以下步骤：

创建一个新的div元素，并设置其样式属性，例如位置、背景颜色、边框、内边距等。
将div添加到文档中的元素中，例如body元素。
为div附加事件处理程序，以便在鼠标移动时显示div，并在点击时停留。
在事件处理程序中，使用jQuery函数来设置div的位置和可见性。

以下是两个示例，演示如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留：

示例1：使用`.mouseover()`和`.click()`函数

以下是一个示例，演示如何使用.mouseover()和.click()函数来创建一个在鼠标移动时弹出的div，并在点击时停留：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mouseover and Click Function Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var popup = $("<div></div>");
      popup.css({
        "position": "absolute",
        "background-color": "white",
        "border": "1px solid black",
        "padding": "10px",
        "display": "none"
      });
      $("body").append(popup);
      $(document).on("mouseover", ".popup-trigger", function(event) {
        var x = event.pageX;
        var y = event.pageY;
        popup.css({
          "left": x + "px",
          "top": y + "px",
          "display": "block"
        });
      });
      $(document).on("click", ".popup-trigger", function(event) {
        event.stopPropagation();
      });
      $(document).on("click", function() {
        popup.hide();
      });
    });
  </script>
</head>
<body>
  <p class="popup-trigger">Hover over me to see the popup</p>
</body>
</html>

在这个示例中，我们创建了一个新的div元素，并使用.css()函数设置其样式属性。我们将div添加到文档的元素中，并使用.on()函数为其附加了两个事件处理程序。第一个事件处理程序使用mouseover事件来显示div，并将其位置设置为鼠标指针的位置。第二个事件处理程序使用click事件来阻止事件冒泡。最后，我们使用另一个click事件处理程序来隐藏div。

示例2：使用`.hover()`和`.click()`函数

以下是一个示例，演示如何使用.hover()和.click()函数来创建一个在鼠标移动时弹出的div，并在点击时停留：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Hover and Click Function Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var popup = $("<div></div>");
      popup.css({
        "position": "absolute",
        "background-color": "white",
        "border": "1px solid black",
        "padding": "10px",
        "display": "none"
      });
      $("body").append(popup);
      $(".popup-trigger").hover(function(event) {
        var x = event.pageX;
        var y = event.pageY;
        popup.css({
          "left": x + "px",
          "top": y + "px",
          "display": "block"
        });
      }, function() {
        popup.hide();
      });
      $(".popup-trigger").click(function(event) {
        event.stopPropagation();
      });
      $(document).click(function() {
        popup.hide();
      });
    });
  </script>
</head>
<body>
  <p class="popup-trigger">Hover over me to see the popup</p>
</body>
</html>

在这个示例中，我们创建了一个新的div元素，并使用.css()函数设置其样式属性。我们将div添加到文档的body元素中，并使用.hover()函数为其附加了两个事件处理程序。第一个事件处理程序使用mouseover事件来显示div，并将其位置设置为鼠标指针的位置。第二个事件处理程序使用mouseout事件来隐藏div。我们使用.click()函数为div附加了一个事件处理程序，以防止事件冒泡。最后，我们使用另一个click事件处理程序来隐藏div。

综上所述，我们可以使用.mouseover()和.click()函数或.hover()和.click()函数来创建一个在鼠标移动时弹出的div，并在点击时停留，并提供了两个示例，演示如何使用这两个函数来实现这个功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留 - Python技术站