鼠标移动到特定模块时弹出小窗口，小窗口内可以显示图片等元素

最新推荐文章于 2024-07-19 14:43:20 发布

bsf000000___

最新推荐文章于 2024-07-19 14:43:20 发布

阅读量738

点赞数

文章标签：计算机外设 css 前端 javascript css3 html

本文链接：https://blog.csdn.net/bsf000000___/article/details/131712546

版权

鼠标移动到特定模块时弹出小窗口，小窗口内可以显示图片等元素

<!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” 需要根据实际文件位置进行更改才能正常加载图片。

效果图：

在这里插入图片描述

bsf000000___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动到特定模块时弹出小窗口，小窗口内可以显示图片等元素

在该代码中，我们使用了一些基本的 HTML 元素和 CSS 样式，也使用了 JavaScript 代码来处理事件。请注意：这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。请注意：这段代码中的图片路径 “onepiece.jpg” 需要根据实际文件位置进行更改才能正常加载图片。当鼠标在触发器上移动时，弹出窗口显示在鼠标位置。这是一个基本的 HTML 文件，其中包含了一个触发弹出窗口的父元素和一个弹出窗口。/* 设置小窗口格式 */// 设置弹出窗口的位置。
复制链接

扫一扫