📅 最后修改于: 2023-12-03 15:24:41.202000 🧑 作者: Mango
在 Web 应用程序中经常需要在鼠标悬停时弹出一个 div，同时可以在单击时停留。下面将使用 jQuery 来实现这一功能。
首先，我们需要在 HTML 页面中添加一些代码以创建 div，并实现鼠标悬停和单击事件。请参考下面的代码片段：
<html>
<head>
<title>如何在鼠标悬停时创建一个弹出 div 并在使用 jQuery 单击时停留？</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="hover-div">这是一个弹出 div</div>
<script>
$(document).ready(function() {
// 鼠标悬停事件
$('#hover-div').hover(function() {
$(this).css('background-color', 'yellow');
}, function() {
$(this).css('background-color', 'white');
});
// 单击事件
$('#hover-div').click(function() {
$(this).css('background-color', 'blue');
});
});
</script>
</body>
</html>
上面的 HTML 页面中有一个 div 元素，它的 id 是“hover-div”。我们将在这个 div 上绑定鼠标悬停和单击事件。
在上述代码片段中，我们使用了 jQuery 的 $(document).ready() 方法。这个方法会在文档加载完成后执行代码。
我们首先将鼠标悬停事件和单击事件绑定到了 id 为“hover-div”的 div 元素上。在鼠标悬停事件中，我们使用 jQuery 的 .hover() 方法来添加鼠标悬停和鼠标离开事件的处理程序。在鼠标悬停时，我们设置 div 元素的背景颜色为黄色，在鼠标离开时，我们将背景颜色设置为白色。
在单击事件中，我们使用 jQuery 的 .click() 方法来添加单击事件的处理程序。在单击时，我们将 div 元素的背景颜色设置为蓝色。
现在，您已经了解了如何使用 jQuery 来创建一个弹出 div，并在鼠标悬停时显示，单击时停留。希望这篇文章对您有所帮助！