jQuery Zoom Magnify插件视频鼠标移出隐藏：如何让视频持续显示？

方法一：将事件绑定到父容器，使用mouseenter/mouseleave #

mouseover/mouseout会因鼠标进入子元素触发冒泡，而mouseenter/mouseleave仅在鼠标真正进入/离开绑定元素时触发。把事件绑定到包含a.p-video和.p-video-iframe的父容器上，可避免鼠标在两个元素间切换时误触发隐藏逻辑。

假设父容器类名为.p-video-container，代码如下：

// 鼠标进入父容器时显示视频
$(document).on('mouseenter', '.p-video-container', function() {
    $('.p-video-iframe').show();
});

// 鼠标离开父容器时，仅在视频未播放时隐藏
$(document).on('mouseleave', '.p-video-container', function() {
    const videoElement = $('.p-video-iframe').find('video')[0];
    // 视频不存在或已暂停/结束时，才隐藏容器
    if (!videoElement || videoElement.paused) {
        $('.p-video-iframe').hide();
    }
});

方法二：监听视频播放状态，控制隐藏逻辑 #

通过监听视频的play、pause、ended事件标记播放状态，在鼠标移出a.p-video时根据状态决定是否隐藏视频：

let videoIsPlaying = false;

// 监听视频播放事件
$(document).on('play', '.p-video-iframe video', function() {
    videoIsPlaying = true;
});

// 监听视频暂停/结束事件
$(document).on('pause ended', '.p-video-iframe video', function() {
    videoIsPlaying = false;
    // 视频暂停/结束后，如果鼠标不在视频或触发元素区域，自动隐藏
    if (!$('.p-video-iframe').is(':hover') && !$('a.p-video').is(':hover')) {
        $('.p-video-iframe').hide();
    }
});

// 鼠标悬停显示视频
$(document).on('mouseover','a.p-video',function () {
    $('.p-video-iframe').show();
});

// 鼠标移出时，仅在视频未播放时隐藏
$(document).on('mouseout','a.p-video',function () {
    if (!videoIsPlaying) {
        $('.p-video-iframe').hide();
    }
});

方法三：通过relatedTarget判断鼠标移出方向 #

在mouseout事件中检查鼠标是否移向目标元素（视频/触发按钮），如果是则不执行隐藏操作：

$(document).on('mouseover','a.p-video',function () {
    $('.p-video-iframe').show();
});

// 移出a元素时，判断鼠标是否移向视频
$(document).on('mouseout','a.p-video',function (e) {
    if (!$(e.relatedTarget).closest('.p-video-iframe').length) {
        $('.p-video-iframe').hide();
    }
});

// 移出视频时，判断鼠标是否移回a元素
$(document).on('mouseout','.p-video-iframe',function (e) {
    if (!$(e.relatedTarget).closest('a.p-video').length) {
        $('.p-video-iframe').hide();
    }
});

内容的提问来源于stack exchange，提问作者Rociwe