Change Background image of div on navbar hover

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

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

So, as I understood, you want to set image to nav-tv on menu element hover? — Yuriy Yakym, Oct 15 '15 at 20:50
So, I've answered with two working examples. Second one is nicer. Enjoy. — Yuriy Yakym, Oct 15 '15 at 21:31

score 1 · Accepted Answer · answered Oct 15 '15 at 20:54

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>

answered Oct 15 '15 at 20:54

andyderuyter

1,081
2
8
25

No problem, happy coding! Be sure to mark this answer as the correct answer, thank you! – andyderuyter Oct 15 '15 at 21:10

score 0 · Answer 2 · answered Oct 15 '15 at 20:49

0

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('');
}

answered Oct 15 '15 at 20:49

saluce

13,035
3
50
67

Thanks ,I want to set the background image to a div below the nav bar – N.sean Oct 15 '15 at 20:57

Ichor de Dionysos · Answer 3 · 2015-10-15T21:11:12.300

0

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);
    });
  }
});

edited Oct 15 '15 at 21:11

answered Oct 15 '15 at 20:52

Ichor de Dionysos

1,107
1
8
30

Thanks but .. The thing is I want it to change to 5 diffrent images – N.sean Oct 15 '15 at 20:57
Then you can change the code to the one i provided above – Ichor de Dionysos Oct 15 '15 at 21:00
For clarification: You want to change the background image if you hover over an element of the class "navigation"? And what background-image of which element you want to change? – Ichor de Dionysos Oct 15 '15 at 21:05
I want the nav bar hover to change the background image of another div not the div containing the navbar .... Thanks for your help – N.sean Oct 15 '15 at 21:08
Then you have to replace the $(this), which refers to the element, on which you listened for hover, with $('css selector'). In your case I think it would be $(.nav-tv') – Ichor de Dionysos Oct 15 '15 at 21:14

Yuriy Yakym · Answer 4 · 2015-10-15T21:30:29.610

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/

Change Background image of div on navbar hover

4 Answers4

Linked