鼠标移动到特定模块时弹出小窗口,小窗口内可以显示图片等元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father {
position: relative;
height: 60px;
width: 200px;
border: 2px solid red;
display: inline-block;
}
/* 设置小窗口格式 */
.popup {
display: none;
/* 样式设置 */
position: absolute;
padding: 0px;
background-color: white;
width: 500px;
height: 500px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var trigger = document.querySelector('.popup-trigger');
var popup = document.querySelector('.popup');
trigger.addEventListener('mousemove', function (event) {
popup.style.display = 'block';
// 设置弹出窗口的位置
popup.style.left = event.clientX + 'px';
popup.style.top = event.clientY + 'px';
});
trigger.addEventListener('mouseout', function () {
popup.style.display = 'none';
});
});
</script>
<body>
<div class="father">
<span class="popup-trigger">我一定要成为海贼王</span>
<div class="popup">
<p>大航海时代是由于罗杰最后的一句话“想要我的财宝吗,我把它都放在那了,想要就去那吧!”开启的,随后人们就开始涌向大海了。那个财宝就是onepiece,地点就是 最终之岛拉夫特尔。</p>
<img src="onepiece.jpg">
</div>
</div>
</body>
</html>
这是一个基本的 HTML 文件,其中包含了一个触发弹出窗口的父元素和一个弹出窗口。
当鼠标在触发器上移动时,弹出窗口显示在鼠标位置。当鼠标移出触发器时,弹出窗口隐藏起来。
在该代码中,我们使用了一些基本的 HTML 元素和 CSS 样式,也使用了 JavaScript 代码来处理事件。
HTML 部分:
<div class="father">
:包含了触发器和弹出窗口的父元素。<span class="popup-trigger">
:触发器元素,当鼠标在其上移动时,触发弹出窗口显示。<div class="popup">
:弹出窗口元素,显示额外的内容。
CSS 部分:
.father
和.popup
类选择器定义了父元素和弹出窗口的样式。
JavaScript 部分:
document.addEventListener('DOMContentLoaded', function () { ... });
:在文档加载完成后执行的 JavaScript 代码。var trigger = document.querySelector('.popup-trigger');
:获取触发器元素。var popup = document.querySelector('.popup');
:获取弹出窗口元素。trigger.addEventListener('mousemove', function (event) { ... });
:为触发器添加鼠标移动事件监听器。trigger.addEventListener('mouseout', function () { ... });
:为触发器添加鼠标移出事件监听器。
请注意:这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。
效果图:
});`:为触发器添加鼠标移出事件监听器。
请注意:这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。
效果图: