Question

我在HTML5中有一个要求。

enter image description here

新闻，商业，人物和品牌是4张图片，我将全部添加到背景图片中。当鼠标悬停在新闻图像上时，背景图像应该更改，鼠标输出应该显示旧的背景图像。我不知道在鼠标悬停功能上要写什么。

请检查代码并告知我需要更改的位置。
内联网应用

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

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

</style>

<script type="text/JavaScript">

    function mouseOverFunction(){

    }

    function mouseOutFunction(){            

    }       
</script>

Answer 1

如果要求是一个元素影响另一个元素的背景，则需要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);

Answer 2

的Javascript

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

JQuery的

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

CSS（3）

#id{
  background-image:url(image.gif);
}

#id:hover{
  background-image:url(mouseoverimage.gif);
}

Answer 3

WORKING DEMO

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

Answer 4

使用Javascript代码..

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

Answer 5

只需使用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');
  }

鼠标悬停时更改背景图片

5 个答案: