jQuery按钮hover切换图片及透明度过渡效果问题求助

问题总结 #

• 鼠标悬停按钮无法切换对应图片
• 图片切换时无透明到不透明的平滑过渡
• 需要鼠标离开按钮后图片保持当前状态

修改后的完整代码 #

<!-- 브라우저 실행 : ALT+B -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>second_test</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function() {
            // 初始只显示第一张图片，其余隐藏
            $('.hz:not(.r)').hide();
            
            // 给按钮绑定hover事件
            $('button').hover(function() {
                // 获取按钮对应的图片类名（按钮文本转小写，对应r/b/c）
                var targetClass = $(this).text().toLowerCase();
                // 先隐藏所有图片，再淡入目标图片
                $('.hz').fadeOut(300, function() {
                    $('.' + targetClass).fadeIn(300);
                });
            });
        });
    </script>
    <style>
        .hz {
            width:800px; 
            height:600px;
            position: absolute; /* 让图片重叠在同一位置 */
            top: 50px; /* 避开back链接 */
        }
        .r {
            background-image: url(./food.jpg);
            background-size: cover;
        } 
        .b {
            background-image: url(./indoor.jpg);
            background-size: cover;
        }
        .c {
            background-image: url(./outdoor.jpg);
            background-size: cover;
        }
    </style>
</head>
<body>
    <a href="./first_web.html">back</a>
    <div class="hz r"></div>
    <div class="hz b"></div>
    <div class="hz c"></div>
    <button>food</button>
    <button>indoor</button>
    <button>outdoor</button>
</body>
</html>

问题解决说明 #

1. 图片切换失效修复

   • 原代码页面加载时同时调用r()、b()、c()，导致最后执行的c()覆盖前面操作，且三个图片初始重叠显示，无法看到切换效果。修改后初始只显示第一张图片，其余隐藏。
   • 移除冗余的onmouseover属性，改用jQuery的hover事件绑定，通过按钮文本匹配对应图片类名，精准触发切换。

2. 平滑过渡效果实现

   • 使用jQuery的fadeOut()和fadeIn()方法，设置300毫秒过渡时长，实现透明到不透明的平滑切换。
   • 给.hz添加position: absolute，让所有图片重叠在同一位置，切换时视觉连贯。

3. 鼠标离开后保持状态

   • hover事件仅在鼠标悬停按钮时触发切换逻辑，鼠标离开时不执行任何重置操作，自然维持当前显示的图片状态。

额外优化点 #

• 删除原代码中无意义的冗余代码（如函数末尾的$('.r')）
• 简化事件绑定逻辑，无需编写三个重复的切换函数

内容的提问来源于stack exchange，提问作者비즈니스계정