I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item using Javascript.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Islington College - Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style type="text/css">
nav ul li:nth-of-type(1){
background-image: url('images/navigation/active_home.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(2){
background-image: url('images/navigation/courses.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(3){
background-image: url('images/navigation/lectures.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(4){
background-image: url('images/navigation/admission.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(5){
background-image: url('images/navigation/facilities.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(6){
background-image: url('images/navigation/contact.png');
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<header class="main_header">
<figure id="logo">
<img src="images/logo.png" alt="Islington College Logo">
</figure>
<nav>
<ul>
<li><a href="index.html" style="color: #EE2B32; padding-top: 43px;">Home</a></li>
<li><a href="courses.html" style="padding-top: 40px;">Courses</a></li>
<li><a href="lectures.html" style="padding-top: 40px;">Lectures</a></li>
<li><a href="admission.html" style="padding-top: 34px;">Admission</a></li>
<li><a href="facilities.html" style="padding-top: 38px;">Facilities</a></li>
<li><a href="contact.html" style="padding-top: 41px;">Contact</a></li>
</ul>
</nav>
</header>