Question

请问我正在开发一个项目并且我是Javascript的新手，所以我想知道是否有一个Jquery代码或者只是一个程序来做什么来使导航菜单上的背景图像更改。例如将鼠标悬停在链接上会将div的背景图像更改为图像1 悬停在链接二上将div的背景图像更改为图像2 这是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;
}

Answer 1

这样的事情：

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

您需要在导航中设置ID：

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

Answer 2

这可以使用纯CSS完成。使用:hover伪类，您可以随意更改任何内容。

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

Answer 3

代码如下：

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

或者如果你有一个增量号码，你可以这样做：

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

Answer 4

如果您不想使用jQuery，可以将数据图像添加到.navigation元素，并设置onmouseover事件，捕获悬停的元素，获取它的数据图像属性并设置其值到nav-tv的背景图片

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

工作示例：https://jsfiddle.net/2npp6t6q/1/

或者：https://jsfiddle.net/1e2v71pr/

在导航栏上更改div的背景图像

4 个答案: