在JavaScript中更改第n个子项的属性

我有一个导航栏，在这里我用第n种类型的CSS选择器更改菜单项的“背景图像”。现在，当我将鼠标悬停到一个确定的菜单项时，我想更改“背景图像”的图片。那么，当我使用Javascript将鼠标悬停在菜单上时，如何更改“背景图像”

伊斯灵顿学院之家
nav ul li：第n种类型（1）{
背景图片：url（'images/navigation/active_home.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}
nav ul li：第n种类型（2）{
背景图片：url（'images/navigation/courses.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}
nav ul li：第n种类型（3）{
背景图片：url（'images/navigation/touctions.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}
nav ul li：第n种类型（4）{
背景图片：url（'images/navigation/admission.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}
nav ul li：第n种类型（5）{
背景图片：url（'images/navigation/facilities.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}
nav ul li：第n种类型（6）{
背景图片：url（'images/navigation/contact.png'）；
背景大小：40%；
背景重复：无重复；
背景位置：中上；
}

为什么要使用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解决方案：

document.querySelectorAll('ul li:nth-child(1)').style.backgroundImage = "url('newbg.png')"

$( "ul li:nth-child(1)" ).css("backgroundImage", "url(newbg.png) no-repeat");

jQuery解决方案：

document.querySelectorAll('ul li:nth-child(1)').style.backgroundImage = "url('newbg.png')"

$( "ul li:nth-child(1)" ).css("backgroundImage", "url(newbg.png) no-repeat");

---

你能不能在CSS中不使用

nav ul li:n类型（6）：hover{background image:x}

或者只使用

nav ul li:hover{background image:x}

呢？

querySelectorAll

的返回值没有

.style

属性，你的帖子根本没有说明当用户将鼠标悬停在元素上时如何实现这一点。