CODEWITHSUNDEEP
jqueryhtmlcss
jkusmanto
jkusmanto

Reputation: 11

How to change background image when mouseover the menu using jQuery?

Can anybody help me please? How to change background image when mouseover the menu using jQuery? What I want is: Every time mouseover, the background image will be changed according to the menu.

Below is the code.

HTML code

<div class="topinhoud">
      <nav>
          <div class="menu">
              <ul>
                  <li><a class="demenu" href="#1">Menu 1</a></li>
                  <li><a class="demenu" href="#2">Menu 2</a></li>  
                  <li><a class="demenu" href="#3">Menu 3</a></li>                     
                  <li><a class="demenu" href="#4">Menu 4</a></li>
                  <li><a class="demenu" href="#5">Menu 5</a> </li>
                  <li><a class="demenu" href="#6">Menu 6</a> </li>
              </ul>
          </div>
      </nav>
</div>

CSS code

.topinhoud {
  background-image: url("../images/bg_1.jpg");
  height: 900px;
  width: 1600px;
  margin: auto;
}

$(document).ready(function() {
    $(".menu li").hover(function() {
          var links = $(".demenu");
          for (var i=0; i<links.length; i++)
          {
            if (i == 0) { $(".topinhoud").css("background-image", "url('images/bg_1.jpg')" )  }
            if (i == 2) { $(".topinhoud").css("background-image", "url('images/bg_2.jpg')" )  }
          };          
        });     
});

Upvotes: 0

Views: 549

Answers (2)

jkusmanto
jkusmanto

Reputation: 11

Thanks Zakaria, Actually my code is like this. Between the menu, there are sub-menues.

<div class="topinhoud">
  <nav>
  <div class="menu">
   <ul>
    <li>
     <a class="demenu" href="#1">Menu 1</a>
     <div class="submenu">
      <ul>  
       <li><a href="#11">sub menu 11</a></li>
       <li><a href="#12">sub menu 12</a></li>
       <li><a href="#13">sub menu 13</a></li> 
      </ul>
     </div>
    </li>
    <li>
     <a class="demenu" href="#2">Menu 2</a>
     <div class="submenu">
      <ul>  
       <li><a href="#21">sub menu 21</a></li>
       <li><a href="#22">sub menu 22</a></li>
       <li><a href="#23">sub menu 23</a></li> 
      </ul>
     </div>
    </li>
    <li>
     <a class="demenu" href="#3">Menu 3</a>
     <div class="submenu">
      <ul>  
       <li><a href="#31">sub menu 31</a></li>
       <li><a href="#32">sub menu 32</a></li>
       <li><a href="#33">sub menu 33</a></li> 
      </ul>
     </div>
    </li>
    <li>
     ...
    </li>
   </ul>
  </div>
 </nav>
</div>

Upvotes: 1

Zakaria Wahabi
Zakaria Wahabi

Reputation: 213

try this maybe it work for you : 

$(document).ready(function() {
    $(".menu li").hover(function() {
            var links = $(this).index();
            $(".topinhoud").css("background-image", "url('images/bg_'"+links +1+"'.jpg'");
    });     
});

Upvotes: 0

Related Questions