如何使用 jQuery 创建鼠标悬停时弹出的 div 窗口，并在点击时停留
概述
弹出的 div 窗口可以使用 HTML 和 CSS 创建，其功能可以通过 JavaScript 库"jQuery"实现。为了使 div 具有鼠标悬停和停留功能，jQuery 内置了一个预定义函数。
此任务主要使用以下两个函数:-
mouseover - 当鼠标悬停在选定元素上时触发此函数。
mouseout - 当鼠标离开选定元素的区域并悬停时触发此函数。
算法
步骤 1 - 在文本编辑器中创建 HTML 样板代码。
步骤 2 - 将 jQuery CDN 链接添加到 HTML 代码的 head 标签中。添加 CDN 链接后，HTML 代码即可使用 jQuery 方法。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
步骤 3 − 现在使用 HTML <button> 创建一个 HTML 按钮标签。
<button>弹出窗口</button>
步骤 4 − 创建一个包含页面弹出窗口的 div 容器。
<div class="container"style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;"> Tutorialspoint </div>步骤 5 − 现在在脚本标签内创建 jQuery 函数。
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
步骤 6 - 弹出功能已准备好在浏览器中使用。
示例
在给定的示例中，我们创建了一个 HTML 按钮，并创建了弹出 div 容器，当鼠标悬停在按钮上时，该容器会显示在屏幕上。我们还使用内联 CSS 设置了弹出窗口的样式。创建了 jQuery 函数，该函数使用 jQuery 选择器语法选中按钮元素，并附加了 mouseover 事件。在 mouseover 事件中，它会传递一个回调函数，该回调函数在鼠标悬停在 div 上时触发。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
<title>JQuery Pop Over</title>
</head>
<body>
<button>Pop-Up</button>
<div class="container" style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;">
Tutorialspoint
</div>
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
</body>
</html>
下图展示了上述示例的输出。第一张图展示了静态的简单输出，页面上仅包含一个按钮。
第二张图展示了弹出式 div 容器。因此，当用户将鼠标悬停在按钮上时，会触发 mouseover 事件，并对显示弹出式 div 的 div 容器执行显示块操作。鼠标悬停在按钮上时，包含弹出窗口的 div 容器会立即显示在屏幕上。当鼠标离开按钮时，弹出窗口会从浏览器屏幕上消失。
结论
这些类型的弹出窗口常用于 Web 应用程序，例如多选题 Web 应用程序。在这个应用程序中，我们可以创建一个按钮来运行弹出窗口，它会弹出问题答案的提示。在这个应用程序中，我们只使用了两个鼠标事件，但还有更多鼠标事件，例如:鼠标按下、输入、离开，这些事件都有各自的功能。弹出窗口就像一个对话框，可以告诉我们关于任何主题的特定信息，也可以是一个确认框，用于确认最终用户的选择(是或否)。在 mouseover 和 mouseout 事件中，必须传递回调才能触发特定操作。不要忘记将 CDN 链接添加到 head 标签，否则 jQuery 函数将无法执行，页面将保持静态，控制台中会显示一些错误。
