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

📌 相关文章

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

📅 最后修改于: 2023-12-03 14:52:59.565000 🧑 作者: Mango

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

简介

在网页开发中，经常会遇到需要在鼠标悬停时创建一个弹出 div，并在点击时保持该 div 不消失的需求。利用 jQuery，我们可以很方便地实现这个功能。本文将详细介绍如何使用 jQuery 实现在鼠标悬停时创建弹出 div，并在点击之后保持弹出 div 的显示。

实现过程

步骤 1：引入 jQuery

在开始之前，你需要在你的网页中引入 jQuery 库。你可以通过以下方式引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤 2：创建 HTML 结构

首先，我们需要在 HTML 中创建 div 元素。这个 div 元素将作为我们的弹出 div，并包含需要显示的内容。例如：

<div id="popup" style="display: none;">
  <h3>弹出标题</h3>
  <p>这是弹出 div 的内容。</p>
</div>

<button id="trigger">点击触发弹出</button>

步骤 3：添加 CSS 样式

为弹出 div 添加一些基本的样式，例如设置宽度、背景颜色和边框等。你可以根据自己的需求进行样式的调整。例如：

#popup {
  width: 200px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}

步骤 4：编写 jQuery 脚本

接下来，我们将使用 jQuery 编写脚本来实现在鼠标悬停和点击时显示或隐藏弹出 div。

鼠标悬停时显示弹出 div

$(document).on("mouseenter", "#trigger", function() {
  $("#popup").show();
});

鼠标移出时隐藏弹出 div

$(document).on("mouseleave", "#popup", function() {
  $("#popup").hide();
});

点击弹出 div 时保持显示
```
$(document).on("click", "#popup", function(e) {
  e.stopPropagation();
});
```
注意，我们使用 e.stopPropagation() 来阻止点击事件的冒泡，这样点击弹出 div 本身时，弹出 div 将不会消失。

完整代码片段

下面是完整的代码片段，包括 HTML、CSS 和 jQuery 部分：

<!DOCTYPE html>
<html>
<head>
<style>
#popup {
  width: 200px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $(document).on("mouseenter", "#trigger", function() {
    $("#popup").show();
  });

  $(document).on("mouseleave", "#popup", function() {
    $("#popup").hide();
  });

  $(document).on("click", "#popup", function(e) {
    e.stopPropagation();
  });
});
</script>
</head>
<body>
<div id="popup" style="display: none;">
  <h3>弹出标题</h3>
  <p>这是弹出 div 的内容。</p>
</div>

<button id="trigger">点击触发弹出</button>
</body>
</html>

总结

通过以上步骤，我们成功使用 jQuery 实现了在鼠标悬停时创建弹出 div，并在点击后保持显示的效果。你可以根据自己的需求对弹出 div 的样式和内容进行进一步的修改。希望本文对你理解如何实现这个功能有所帮助！