I have linked a jquery file but I can't use it

by

I have linked my HTML to jquery but when I run it in microsoft edge, it outputs "Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) @ Help.js:1".I was wondering how to fix this.

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>A Random Website</title>
</head>
<body>
    <script src="style.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <div class="navBar">
        <div>
            <h1 id="Title">SomeRandomWebsite</h1>
        </div>
    </div>
</body>
</html>

Javascript

$(document).ready(function(){
    $(".navBar").hover(function(){
        $(this).css("border","2px solid black")
    })
})

CSS(if needed)

.navBar{
    display: flex;
    position: sticky;
    top:0;
    padding: 20px;
    border: none;
    width: 100%;
    justify-content: center;
    background-color: gainsboro;
    z-index: 2;
    
 }
 #Title{
     color: black;
     font-family: monospace;
 }

Leave a Comment