javascript - 在导航栏悬停时更改 div 的背景图像

Question

拜托，我正在做一个元素，我是 Javascript 的新手，所以我想知道是否有 Jquery 代码或只是关于如何使背景图像在导航菜单悬停时发生变化的过程。 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上，将 div 的背景图像更改为图像 2 这是 HTML

  <div class = "header-menu">
  <div class ="pull-left">
   <ul>
   <li><a class="navigation" href="index.html">Home</a></li>
  <li><a class="navigation" href="index.html">About</a></li>
  <li><a class="navigation" href="index.html">Rules</a></li>
  </ul>
  </div>
  <div class = "pull-right">
  <ul>
  <li> <a class="navigation" href="login.html">Log In </a></li>
  <li><a class="navigation" href="signup.html">Sign Up</a></li>
  </ul>
  </div>
  <div class = "logo-header">
  <center><a href = "index.html"><img src = "images/logo.png" ></a></center>
  </div>
  </div>

 <div class= "nav-tv">
 </div>

还有CSS

 .header-menu{
height:95px;
width:100%;
color:black;
height:100px;
position:relative;
background-color:black;
overflow: hidden;
}

.header ul {
    padding-top:35px;
  }
 .header-menu li {
   display: inline;
   margin :20px;
  }

.pull-left{
    padding-top:35px;
    margin-top:0px;
    float: left;
    width = 33.3%;
 }

.logo-header{
     margin-top:15px;
     position:absolute;
     width:220px;
     border: 1px solid black;
     margin-left:570px;
     margin-right:500px;
     width = 33.3%;
     }

 .pull-right{
    padding-top:35px;
    width = 33.3%;
    float :right;
   }

.nav-tv{
width:100%;
height:350px;
border:1px solid black;
background-image: url('images/2.jpg');
background-repeat: no-repeat;
background-size: cover;
}

Answer 1

像这样:

$(document).ready(function(){
    $("a.navigation#home").mouseover(function(){
        $(.nav-tv).css("background-image", "url('images/your-new-bg.jpg')");
    });
});

您需要为您的导航设置 id:

<a class="navigation" id="home" href="index.html">Home</a>