jQuery don't work with my index.html

jQuery don't work with my index.html

I want the buttons on my page to fadeTo opacity 0.7 when i hover my mouse on it and back to 1 when i take my mouse away. But it doesn't work.
Heres my code (index.html):
<!DOCTYPE html>
<html>
<head>
<title>For Fun HTML/CSS</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="shortcut icon" type="image/icon" href="/images/favicon.ico">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<nav>
<h1 class="titleh1">Enon's Homepage</h1>

<ul class="navBar">
<a href="index.html" class="navA"><button class="navButtonHome">Home/ Front Page</button></a>
<a href="Nyheter.html" class="navA"><button class="navButton">News</button></a>
<a href="Bilder_Videoer.html" class="navA"><button class="navButton">Pictures/Videos</button></a>
</ul>
</nav>
</header>

<div class="row">
<div class="col"></div>
<hr class="hrMark">
<div class="col"><span></span></div>
<hr class="hrMark">
<div class="col"><span></span></div>
</div>

<footer></footer>

</body>
</html>

CSS file:
body {
margin: 0;
font-family: Arial;
background: #409B2E;
}
.navBar {
display: inline;
}
.navLi {
display: inline-block;
}
header {
background: #A1E5FC;
color: white;
font-family: Arial;
width: 100%;
border: 1.24px solid black;
}
.titleh1 {
margin: 0 0 0 5px;
display: inline;
font-family: Arial Black;
font-size: 30px;
color: #C10000;
}
.col {
background: #C2C8E8;
padding: 1.16%;
margin: 5px;
margin-right: 50%;
border: 2px solid black;
border-radius: 5px;
}
.hrMark {
height: 5px;
background: red;
border: 2px solid black;
margin-right: 49.74%;
margin-left: 0.25%;
}
.navButton {
font-size: 24px;
color: black;
background: #BFBDB7;
margin-bottom: 0.5%;
margin-right: 1%;
border-radius: 6px;
border: 1px solid #001FD3;
}
.navButton:hover {
font-size: 26px;
color: black;
background: red;
}
.navButtonHome {
background: red;
font-size: 24px;
color: black;
margin-bottom: 0.5%;
margin-right: 1%;
border-radius: 6px;
border: 1px solid #001FD3;
}
span {
color: blue;
font-family: Arial Black;
}
.colVideo {
background: #C2C8E8;
padding: 1.16% 60% 1.16% 1.16%;
margin: 5px;
margin-right: 50%;
border: 2px solid black;
border-radius: 5px;
}
.colPicture {
background: #C2C8E8;
padding: 1.16% 60% 1.16% 1.16%;
margin: 5px;
margin-right: 50%;
border: 2px solid black;
border-radius: 5px;
}
.hrMarkVideo {
height: 5px;
background: red;
border: 2px solid black;
margin-right: 38%;
margin-left: 0.25%;
}

jQuery script:
$(document).ready(function() {
$(".navButton").mouseenter(function() {
  $(this).fadeTo("fast", 0.7);
});
$(".navButton").mouseleave(function() {
   $(this).fadeTo("slow", 1);
});
});

---------------------------

The problem is that nothing happends when i hover my buttons.