在父容器内悬停时使子元素跟随鼠标移动的教程

<div class="gallery">
    <div class="gallery-cell">
        <img class="gallery-cell-image" src="https://agoberg.tv/tmp/blue.jpg" alt="Blue Image" />
        <video class="gallery-cell-video" src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
        <div class="hovertext"><h1>Some Text 1</h1></div>
    </div>

    <div class="gallery-cell">
        <img class="gallery-cell-image" src="https://agoberg.tv/tmp/red.jpg" alt="Red Image" />
        <video class="gallery-cell-video" src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
        <div class="hovertext"><h1>Some Text 2</h1></div>
    </div>

    <div class="gallery-cell">
        <img class="gallery-cell-image" src="https://agoberg.tv/tmp/grey.jpg" alt="Grey Image" />
        <video class="gallery-cell-video" src="https://agoberg.tv/video/B_vs_W.mp4" autoplay muted loop></video>
        <div class="hovertext"><h1>Some Text 3</h1></div>
    </div>
</div>

<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

h1 { color:#fff; } /* 示例文本颜色 */

.gallery {
    position: relative; /* 如果需要，可以为整个画廊设置相对定位 */
    padding: 10px; /* 示例间距 */
    background: #333;
}

.gallery-cell {
    width: 500px;
    height: 200px;
    display: block;
    background: #666; /* 默认背景色 */
    position: relative; /* 关键：子元素的绝对定位将相对于此父元素 */
    margin: 10px 0; /* 单元格间距 */
    overflow: hidden; /* 隐藏超出部分 */
}

.gallery-cell-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.gallery-cell-video {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden; /* 默认隐藏 */
    opacity: 0; /* 配合过渡效果 */
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

.hovertext {
    position: absolute; /* 关键：使元素可以自由定位 */
    top: 0;
    left: 0;
    z-index: 100; /* 确保在其他元素之上 */
    overflow: hidden;
    white-space: nowrap;
    visibility: hidden; /* 默认隐藏 */
    opacity: 0; /* 配合过渡效果 */
    transition: visibility 0s, opacity 0.3s ease-in-out;
    pointer-events: none; /* 避免hovertext捕获鼠标事件，影响父元素hover */
}

/* 鼠标悬停在 gallery-cell 上时显示视频和文本 */
.gallery-cell:hover .gallery-cell-video,
.gallery-cell:hover .hovertext {
    visibility: visible;
    opacity: 1;
}

$(document).ready(function() {
    // 为所有具有 .gallery-cell 类的元素绑定 mousemove 事件
    $(".gallery-cell").mousemove(function(e) {
        // 在当前悬停的 .gallery-cell 内部查找 .hovertext 元素
        // .first() 确保即使有多个 .hovertext 也只选择第一个
        var $popup = $(this).find(".hovertext").first();

        // 获取当前 .gallery-cell 元素相对于文档的偏移量
        var eTop = $(this).offset().top;
        var eLeft = $(this).offset().left;

        // 获取鼠标指针相对于文档的坐标
        var mouseX = e.pageX;
        var mouseY = e.pageY;

        // 计算 .hovertext 元素相对于其父元素 (.gallery-cell) 的新位置
        // 鼠标的文档坐标减去父元素的文档坐标，得到鼠标在父元素内部的相对坐标
        var relativeX = mouseX - eLeft;
        var relativeY = mouseY - eTop;

        // 设置 .hovertext 的 top 和 left 样式，使其跟随鼠标
        $popup.css({top: relativeY, left: relativeX});
    });
});