Question

我有一个导航栏，我在其中更改＆＃34; background-image＆＃34;具有nth-type-CSS CSS选择器的菜单项。现在，我想改变＆＃34; background-image＆＃34;的图片。当我将鼠标悬停在一个确定的菜单项上时。那么，我怎样才能改变＆＃34;背景图像＆＃34;当我将鼠标悬停在使用Javascript的菜单上时？

＆＃13;

<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>

＆＃13;

Answer 1

为什么要使用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');
}

Answer 2

纯Javascript解决方案：

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

jQuery解决方案：

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

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

2 个答案: