Javascript 鼠标悬停时更改背景图像

我对HTML5有一个要求

新闻、商业、人物和品牌是4张图片，我把它们全部添加到背景图片中。 当我将鼠标悬停在新闻图片上时，背景图片应该会改变，鼠标应该显示旧的背景图片。 我不知道在mouseover函数上写什么

请检查代码，并让我知道哪里需要更改。
内部网应用

html，正文{
保证金：0；
填充：0；
身高：100%；
填充顶部：0px；
垫底：0px；
}
#背景{
背景图片：url（'img/asianwoman.jpg'）；
宽度：100%；
身高：100%；
最小高度：100%；
最小宽度：100%；
背景大小：100%100%；
}
函数mouseOverFunction（）{
}
函数mouseOutFunction（）{
}       

---

如果要求一个元素影响另一个元素的背景，则需要JS。假设id=“news”是触发元素，id=“BG”是接收元素：

document.getElementById("news").addEventListener("mouseover", function() {
  document.getElementById("BG").style.backgroundImage = "url(img/southamericangrandmother.jpg)";
}, false);
document.getElementById("news").addEventListener("mouseout", function() {
   document.getElementById("BG").style.backgroundImage = "";
}, false);

Javascript

var e = document.getElementById('id');
e.style.backgroundImage = 'url(image.gif)';

JQuery

$('#id').css('background-image','url(image.gif)');

CSS（3）

只需使用css即可

有效地

#BG {
    background-image: url('img/asianwoman.jpg');
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    background-size: 100% 100%; 
    transition:background 2s;
    -webkit-transition:background 2s; /* Safari */                            
}

  #BG:hover {
    background-image: url('img/yourNewImage.jpg');
  }

使用Javascript代码

    document.getElementById('BG').onmouseover = function()        
     {        
      document.getElementById('BG').style.backgroundImage = "url('image.png') no-repeat";
     };

---

不需要javascript。请参见：hover伪元素：它确实有效。请看一个例子。如果它在你的网站上不起作用，那么在#BG上可能有某种元素阻止了悬停的发生。查看实际的HTML代码会有所帮助。在我的例子中，我在main div类中有一个背景，并将鼠标移到另一个图像（新闻图像）中，更改主div类背景。在这种情况下，请使用javascript：处理图像的mouseover/mouseout并更改所需div的bg。对于不太熟悉Java脚本的人：此答案的片段必须放在引用元素“news”和“bg”的下面。正如@np_389;所解释的：如果将鼠标移到一个元素上会影响另一个元素的背景，则此操作不起作用。

#BG {
    background-image: url('img/asianwoman.jpg');
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    background-size: 100% 100%; 
    transition:background 2s;
    -webkit-transition:background 2s; /* Safari */                            
}

  #BG:hover {
    background-image: url('img/yourNewImage.jpg');
  }

 html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    }

   #BG {
      background-image: url('http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg') ;
      width: 500px;
      height: 500px;

   }

 #BG:hover {
    background-image: url('http://radiantq.com/wp-content/uploads/2011/11/software_box.png');
    }

    document.getElementById('BG').onmouseover = function()        
     {        
      document.getElementById('BG').style.backgroundImage = "url('image.png') no-repeat";
     };