如何修复hover移出.parent容器时图片不淡出及碎图闪烁问题？

问题1：移出.parent容器后图片无法淡出 #

当前仅给.content绑定了hover事件，当鼠标直接从.content移到.parent外部时，不会触发.content的mouseleave事件，导致图片无法淡出。

修复方法：给.parent添加mouseleave事件，统一处理图片淡出逻辑。

问题2：过渡时破碎图片图标闪烁 #

原因有两点：

• 初始<img>标签src为空，浏览器会显示破碎图标；
• 移出hover时，attr("src", '')会立即清空图片地址，而animate是异步执行的，此时图片还未完全淡出，就会出现破碎图标闪烁。

修复方法：

• 给初始<img>设置透明base64图片作为占位，避免空src的破碎图标；
• 将清空src的操作放到animate的回调函数中，等图片完全淡出后再执行。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        .parent {
            width: 100%;
            height: 100%;
            background-color: black;
            position: relative;
            min-height: 60vh; /* 给容器设置最小高度，避免内容撑不起高度 */
        }
        .child {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.4s; /* 可选：用CSS过渡替代jQuery animate，更流畅 */
        }
        .content {
            height: 20vh;
            position: relative;
            z-index: 1;
            border-bottom: 1px solid gray;
        }
        .content h3 {
            position: relative;
            margin: 10px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="parent">
        <!-- 用透明base64图片作为初始占位 -->
        <img class="child" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
        <div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
            <h3>Title</h3>
        </div>
        <img class="child" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
        <div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
            <h3>Title</h3>
        </div>
        <img class="child" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
        <div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
            <h3>Title</h3>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        // 封装图片淡出函数，复用逻辑
        function fadeOutImages() {
            $(".child").finish().animate({
                opacity: 0
            }, 400, function() {
                // 动画完成后再重置为透明占位图
                $(this).attr("src", 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
            });
        }

        $('.content').hover(
            function() {
                var dataImg = $(this).data('imgurl');
                $(".child").finish().attr("src", dataImg).animate({
                    opacity: 1
                }, 400);
            },
            function() {
                fadeOutImages();
            }
        );

        // 给父容器绑定mouseleave，处理直接移出容器的场景
        $('.parent').mouseleave(function() {
            fadeOutImages();
        });
    </script>
</body>
</html>

额外优化说明 #

• 给.parent添加min-height，避免容器因内容高度不足导致mouseleave事件触发异常；
• 可选使用CSS的transition替代jQuery的animate，过渡效果更流畅（若使用，可移除jQuery的animate逻辑，直接修改元素的opacity属性）。

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