数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用jQuery创建鼠标悬停时弹出div，点击后保持显示
概述
可以使用HTML、CSS创建弹出式div，其功能可以通过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>Pop-Up</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 - 现在在script标签内创建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容器执行display: block操作，显示弹出式div。一旦鼠标悬停在按钮上，包含弹出的div容器就会显示在屏幕上。当鼠标离开按钮时，弹出窗口会从浏览器屏幕上消失。
结论
这些类型的弹出框用于网络应用程序，例如多项选择题网络应用程序，我们可以在其中创建一个按钮来运行弹出框，该弹出框将弹出问题的答案提示。在这里，我们只使用了两个鼠标事件，但还有更多鼠标事件，例如：mousedown、mouseenter、mouseleave，这些事件都有其自身的功能。弹出框就像一个对话框，它告诉我们关于任何主题的某些信息，它也可以是一个确认框，用于确认最终用户在“是”或“否”方面的选择。在mouseover和mouseout事件中，必须传递一个回调函数，以便触发特定操作。不要忘记将CDN链接添加到head标签中，否则jQuery函数将不会执行，页面将保持静态，控制台中会显示一些错误。
3K+ 次浏览
