Question

我正在尝试在悬停时更改div背景图像，我想用JaveScript执行此操作，以便它可以跨浏览器工作而不会出现任何问题。我目前的代码是：

<div class="staff" style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);" onmouseover="this.style.background=url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);" onmouseout="this.style.background=url(wp-content/uploads/2013/08/IMG_1828-300x237.png);">
</div>

CSS：

.staff{
width: 300px;
height: 237px;
}

有人能看出导致问题的原因吗？

Answer 1

<style>
  .staff{
      width: 300px;
      height: 237px;
      background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);
  }

  .staff:hover {
      background-image: url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png);
  }
</style>
<div class="staff"></div>

Answer 2

您也可以使用简单的css ..它适用于所有浏览器

.staff { background: url("url/img.png")}
.staff:hover { background: url("url/hoverimg.png")}

<div class="staff"></div>

Answer 3

更好地使用CSS而不是内联CSS和javascript来实现效果。

如果您仍希望内联，请举例说明。

jsfiddle

onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

Answer 4

你可以使用这样的css：

.staff{
width: 300px;
height: 237px;
background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

或javascript喜欢： onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";

Answer 5

WORKING DEMO

我改变了

 onmouseover="this.style.background='url()';"

你必须将网址包含在单个qoutes中......

我还建议您使用CSS而不是JS来执行此操作。但是既然你问过如何在JS中这样做，这就是你的答案

Answer 6

大多数浏览器都应支持css中的:hover，因此无需为此 (relevant fiddle here) 使用JavaScript：

.staff{
    width: 300px;
    height: 237px;
    background-image: url("/wp-content/uploads/2013/08/IMG_1828- 300x237.png");
}
.staff:hover{
    background-image: url("wp-content/uploads/2013/08/IMG_1836-v2-300x237.png");
}

如果您真的想使用JavaScript，那么必须将url(...)包含在引号中，如下所示：

<div class="staff"
  style="background-image: url(/wp-content/uploads/2013/08/IMG_1828- 300x237.png);"
  onmouseover="this.style.background='url(wp-content/uploads/2013/08/IMG_1836-v2-300x237.png)';"
  onmouseout="this.style.background='url(wp-content/uploads/2013/08/IMG_1828-300x237.png);'">
</div>

Answer 7

我认为你可以使用这个脚本：

 $('.staff').mouseover(function() {
        $(this).attr('style',"background:grey;");
    })
    $('.staff').mouseout(function() {
        $(this).attr('style',"background:white;");
    })

将颜色更改为图像路径。

Answer 8

   $(document).ready(function(){
  var staff = $(".staff"); //Avoid repeated traverse

   $("img").hover(function(){
   staff.css("background",'url(' + $(this).attr('src') + ')'); 

      //Assuming you want to set current image as background image
});

    $( "img" ).mouseout(function(){
        staff.css("background","none");  
    });
   });

好的，这对我有用，所以当你将鼠标悬停在图像上时，设置div的背景会发生变化。因此，当您将鼠标悬停在图像上时。更改背景。我相信这就是你想要的？

使用JavaScript无法更改DIV背景图像

8 个答案: