将鼠标悬停在其他按钮上时更改 IMG SRC jQuery

>我正在尝试调整网站的侧面图像，每个按钮都应该将图像更改为不同的src，我试过这个：

$(document).ready(function(){
   $("#introID").hover(function(){
        $("#frame").attr("src", "newImage.png");
   });
});

和其他一些变体，但由于某种原因，jquery没有抓住？或者也许是我的语法有关？从我的内心，我只需要

这是我的网页：

<html>
<head>
<meta charset="utf-8">
<title>CAPP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    $(document).ready(function(){
    $("#introID").hover(function(){
        $("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
    });
});

</script>
<body>
<div id="logodiv">
<img id="logo" src="logo.png" alt="logo"/>
</div>
<div id="h1s">
<img src = "Origionalimage.png" id="frame"/>
    <div class="h1padding"></div>
    <a class = "h1" href="" id="introID">Intro</a>
    <div class="h1padding"></div>
    <a class = "h1" href="">ON THE <span class="light">SURFACE</span></a>
    <div class="h1padding"></div>
    <a class = "h1" href="">From <span class="light">ore to oil</span></a>
    <div class="h1padding"></div>
    <a class = "h1" href="">Environmental <span class="light">care</span></a>
    <div class="h1padding"></div>
    <a class = "h1" href="">Much more than <span class="light">gasoline</span></a>
    <div class="h1padding"></div>
    <a class = "h1" href="">One more <span class="light">thing</span></a>
</div>


</body>

提前致谢:)

如果设置了 src 属性，则不得将自己的脚本嵌入到 script 标记中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#introID").hover(function(){
            $("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
        });
    });
</script>

这应该可以解决问题。在这里，您将找到更多信息。

相关内容

最新更新

热门标签：