我有一个导航栏，我在其中使用第 nth-of-type CSS 选择器更改菜单项的“背景图像”。现在，当我将鼠标悬停在确定的菜单项上时，我想更改“背景图像”的图片。那么，当我使用 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>最佳答案
为什么要用 JavaScript 来做这件事？您应该能够使用 CSS:
nav ul li {
background-size: 40%;
background-repeat: no-repeat;
background-position: center top;
}
nav ul li:nth-of-type(1){
background-image: url('images/navigation/active_home.png');
}
/* Like this */
nav ul li:nth-of-type(1):hover {
background-image: url('images/navigation/active_home_hover.png');
}
nav ul li:nth-of-type(2){
background-image: url('images/navigation/courses.png');
}
nav ul li:nth-of-type(3){
background-image: url('images/navigation/lectures.png');
}
nav ul li:nth-of-type(4){
background-image: url('images/navigation/admission.png');
}
nav ul li:nth-of-type(5){
background-image: url('images/navigation/facilities.png');
}
nav ul li:nth-of-type(6){
background-image: url('images/navigation/contact.png');
}
关于javascript - 在 JavaScript 中更改第 n 个子项的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30441161/