更改导航栏悬停上的div的背景图片 [英] Change Background image of div on navbar hover

问题描述

请我正在开发一个项目，我是新的Javascript，所以我想知道如果有一个Jquery代码或只是一个程序，如何做，使背景图像在导航菜单悬停更改。
例如hover on link one更改div的背景图像到图像1
悬停在链接两个更改背景图像的div到图像2
这是HTML

Please I am working on a project and I'm new to Javascript so I was wondering If there is a Jquery code or just a procedure on what to do to make the backgroung image to change on navigation menu hover. e.g. hover on link one changes background image of div to image 1 hover on link two changes background image of div to image 2 Here is the 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;
}

推荐答案

p>

Something like this:

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

您需要将ID设置为您的导航：

You need to set id's to your navigation:

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

这篇关于更改导航栏悬停上的div的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！