鼠标移入图片触发modal预览时与footer元素重叠问题求助

问题原因 #

你遇到的重叠问题有两个核心诱因：

1. 堆叠层级问题：你当前给modal设置的z-index:5过低，footer没有显式设置z-index，默认堆叠顺序下modal会被层级更高的footer元素覆盖
2. 定位逻辑缺陷：modal的定位只跟随鼠标往下偏移，没有做边界校验，移动到靠近底部的图片时，modal会自然延伸到footer区域

修复步骤 #

1. 修复CSS层级

修改你的样式代码，显式设置footer和modal的堆叠顺序：

.b-footer {
    background-color: #274472;
    color: white;
    position: relative;
    z-index: 1; /* 给footer设置较低的层级 */
}
.modal {
    position: absolute;
    padding: 10px 10px 0 10px;
    background-color: #424242;
    pointer-events: none;
    height: auto;
    width: auto;
    z-index: 999; /* modal层级远高于footer，保证不会被覆盖 */
}

2. 优化modal定位逻辑，避免侵入footer区域

注意你当前的事件绑定写在$.each循环里，会导致每张图片加载时重复给所有图片绑定事件，性能极差，推荐用事件委托写法，把三个事件都挪到$.each外面，同时增加边界判断，modal即将碰到footer时自动调整到鼠标上方显示：

// mouseenter事件
$(document).on('mouseenter', 'ul.gallery img', function (event) {
    $(this).addClass("gray");
    var title = $(this).attr("alt");
    var detail;
    for (var i = 0; i < data.length; i++) {
        if (data[i].title == title) {
            detail = "<div class = 'modal'> <img src='images/medium/" + data[i].path + "' alt='" + data[i].title + "'><p>" + data[i].title + "</p></div>";
            break;
        }
    }
    $(document.body).append(detail);
});

// mouseleave事件
$(document).on('mouseleave', 'ul.gallery img', function () {
    $(this).removeClass("gray");
    $(".modal").remove();
});

// mousemove事件
$(document).on('mousemove', 'ul.gallery img', function (event) {
    $(this).addClass("gray");
    const $modal = $(".modal");
    const modalHeight = $modal.outerHeight();
    const footerTop = $("footer").offset().top;
    let modalTop = event.pageY + 10;
    // 校验modal底部是否超过footer顶部，是则往上偏移
    if (modalTop + modalHeight > footerTop) {
        modalTop = event.pageY - modalHeight - 10;
    }
    // 防止modal超出视口顶部
    modalTop = Math.max(modalTop, 10);
    $modal.css({ top: modalTop, left: event.pageX + 10, display: 'block' });
});

3. 修复现有代码的小bug

你原来生成modal的HTML代码里p标签没有闭合，已经在上面的mouseenter代码里修正了。

修改后modal既不会被footer遮挡，也不会主动侵入footer区域重叠。

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