Jquery创建层显示标题和内容且随鼠标移动而移动

下面是一个使用jQuery实现创建一个层（div），并在其中显示标题和内容，同时使这个层能够随着鼠标移动而移动的示例代码。这段代码将直接在HTML页面中通过`

然后，你可以添加以下HTML和JavaScript代码：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery 移动层示例</title>
<style>
    #floatingLayer {
        position: absolute;
        padding: 10px;
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        display: none; /* 初始时隐藏层 */
    }
</style>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var $floatingLayer = $('<div id="floatingLayer"><h3>标题</h3><p>这里是内容...</p></div>');
    $('body').append($floatingLayer); // 将层添加到body中

    $(document).mousemove(function(e) {
        var mouseX = e.pageX;
        var mouseY = e.pageY;

        $floatingLayer.css({
            left: mouseX + 10, // 层的左边距设置为鼠标位置向右偏移10px
            top: mouseY + 10,  // 层的上边距设置为鼠标位置向下偏移10px
            display: 'block'  // 显示层
        });
    });

    // 当鼠标移出文档时，隐藏层（可选）
    $(document).mouseleave(function() {
        $floatingLayer.hide();
    });
});
</script>

</body>
</html>

这段代码首先定义了一个样式为`#floatingLayer`的CSS类，用于设置层的样式。然后，在`