HTML 鼠标悬浮窗口 - 代码示例及实现步骤 - 常规

以下是一个使用 HTML 编写的鼠标悬浮窗口的示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        #tooltip {
            display: none;
            position: absolute;
            padding: 5px;
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="tooltip">This is a tooltip</div>
    
    <p data-tooltip="这是一个悬浮窗口示例。">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae consectetur turpis, at faucibus elit. Sed sed nunc sit amet erat varius lacinia eu eu eros. Nulla molestie, lorem vel eleifend congue, erat ligula volutpat nisl, ut euismod turpis justo sed purus. Mauris in suscipit ligula, ac dictum sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam non elit vitae quam venenatis mattis. Nulla at vehicula ligula. Nam eu nunc id nulla cursus auctor et et lectus. Sed rhoncus eros in nunc eleifend, et luctus dui malesuada. Ut a sem non purus interdum molestie.</p>
    
    <script>
        var tooltip = document.getElementById("tooltip");
        document.onmousemove = function(event) {
            event = event || window.event;
            var target = event.target || event.srcElement;
            
            if (target.hasAttribute("data-tooltip")) {
                tooltip.style.display = "block";
                tooltip.style.left = event.pageX + "px";
                tooltip.style.top = event.pageY + "px";
                tooltip.innerHTML = target.getAttribute("data-tooltip");
            } else {
                tooltip.style.display = "none";
            }
        };
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个隐藏的 div 元素，用于显示鼠标悬浮窗口的内容。然后，我们在需要显示悬浮窗口的元素上添加了 data-tooltip 属性，并将要显示的内容作为该属性的值。当鼠标悬浮在带有 data-tooltip 属性的元素上时，我们通过 JavaScript 将悬浮窗口显示在鼠标位置，并将内容设置为 data-tooltip 属性的值。当鼠标不再悬浮在该元素上时，我们将悬浮窗口隐藏起来。