Question

我试图创建一个简单的效果作为练习基本上我希望图像在我悬停在它上面时改变并在我鼠标移开时恢复

     <!DOCTYPE html>
     <html>
        <head>
            <title>Change pics on event</title>
            <meta charset = "utf-8">
            <script src = "jsf/jquery-1.8.js"></script>
            <link rel = "stylesheet" href = "talkpics.css">

        </head>
        <body>
            <div id = "pic">
                <img id = "sk" src = "tpi/skutch.jpg">
                <div id = "speech">
                   <img src = "tpi/speech5.png">
                </div>
            </div>
            <script>
                $(document).ready(function (){
                        $("#sk").hover(function(){
                        $(this).attr("src","tpi/skutch2.jpg");
                            }, function(){
            $(this).attr("src", "tpi/skutch.jpg");          
                              }
                });
            });
            var sb = new Array();
                sb[0] = 'tpi/speech1.png';
                sb[1] = 'tpi/speech2.png';
                sb[2] = 'tpi/speech3.png';
                sb[3] = 'tpi/speech4.png';
                sb[4] = 'tpi/speech5.png';



            </script>
        </body>
    </html>

数组是我想要稍后添加的其他内容的一部分，这是一个随机的png语音气泡..基本上我希望当你滚动它时，图像会随着随机的语音气泡而改变。但是现在我的问题是让skutch图像改变。我已经按照网络上的tutes进行了编码，并且已经给出了示例，但是图像保留在skutch.jpg上是行不通的。我不确定为什么任何帮助会很棒。

*{
padding:0px;
margin:0px;
border:none;
}

#pic{
height:500px;
width:500px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
}

#sk{
position:relative;
}
#speech{
position:relative;
top:-450px;
left:-20px;
}

Answer 1

不确定，如果这是问题，但你在这里有一个额外的括号：

$(document).ready(function () {
    $("#sk").hover(function () {
        $(this).attr("src", "tpi/skutch2.jpg");
    }, function () {
        $(this).attr("src", "tpi/skutch.jpg");
    //}  <== Not needed, comment it out...
    });
});

Answer 2

如果您使用更好的缩进格式化代码，您将看到有一个不应该存在的额外}，这是一个语法错误，阻止它工作：

            $(document).ready(function () {
                $("#sk").hover(function () {
                    $(this).attr("src", "tpi/skutch2.jpg");
                }, function () {
                    $(this).attr("src", "tpi/skutch.jpg");
                }   // <-- remove this one
                });
            });

另请注意，初始化数组的更好方法如下：

var sb = ['tpi/speech1.png',
          'tpi/speech2.png',
          'tpi/speech3.png',
          'tpi/speech4.png',
          'tpi/speech5.png'];

你这样做有效，但为什么在你不需要的时候输出所有sb[0] =部分呢？

jquery悬停更改图像将无法正常工作？

2 个答案: