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

Question

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

and also the 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

Something like this:

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

You need to set id's to your navigation:

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

Answer 2

This can be done using pure CSS. Using the :hover pseudo-class, you can change pretty much anything you want.

.header-menu li:hover {
    background-image: url('');
}

Answer 3

The code would be:

$(function(){
  $('#id1').hover(function() {
    $('css selector of div').css('background-image', imageUrl);
  });

  $('#id2').hover(function() {
    $('css selector of div').css('background-image', imageUrl);
  });

  $('#id3').hover(function() {
    $('css selector of div').css('background-image', imageUrl);
  });
});

Or if you have an incremental number you can just do this:

$(function(){
  for(i=1; i<=5; i++) {
    $('#id' + i).hover(function() {
      $('css selector of div').css('background-image', imageUrl);
    });
  }
});

Answer 4

If you don't want to use jQuery, you can do it adding for example data-image to .navigation elements, and set onmouseover event, to catch element which was hovered, get it's data-image attribute and set its value to nav-tv's background image

html:

<a data-image='images/1.jpg' class="navigation" href="index.html">Home</a>

Javascript:

(function() {
    var navTv = document.getElementById('nav-tv');
    var arr = document.getElementsByClassName('navigation');
    for(var i=0; i<arr.length; i++) {
        arr[i].onmouseover = function(e) {
            var a = e.target;
            var imgSrc = a.getAttribute('data-image');
            var style = ['background-image: url(', imgSrc, ');'].join('');
            navTv.setAttribute('background-image', style);
        }
    }
})();

Working example: https://jsfiddle.net/2npp6t6q/1/

Or this: https://jsfiddle.net/1e2v71pr/