Question

是的，有人可以帮帮我吗？使用jQuery鼠标悬停菜单时如何更改背景图像？我想要的是：每次鼠标悬停时，背景图像都会根据菜单进行更改。

以下是代码。

HTML代码

<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代码

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

Answer 1

谢谢Zakaria，其实我的代码是这样的。在菜单之间，有子菜单。

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

Answer 2

尝试这可能对你有用：

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

使用jQuery鼠标悬停菜单时如何更改背景图像？

2 个答案: