1

我正在尝试更改悬停时的 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;
}

任何人都可以看到导致问题的原因吗？

4

8 回答 8

1

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

如果你仍然想内联，这里有一个例子。

jsfiddle

onmouseover="javascript: this.style.backgroundImage = 'url(\'image_url\')'";
于 2013-08-07T10:32:52.840 回答
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>
于 2013-08-07T10:28:08.693 回答
1

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

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

<div class="staff"></div>
于 2013-08-07T10:29:14.490 回答
1

你可以像这样使用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\')'";

于 2013-08-07T10:44:59.397 回答
0

工作演示

我所做的改变

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

您必须将 url 括在单个 qoutes 中...

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

于 2013-08-07T10:37:06.330 回答
0

大多数浏览器应该支持:hovercss，因此不需要为此使用 JavaScript （相关小提琴here）：

.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>
于 2013-08-07T10:37:08.463 回答
0

我认为您可以使用此脚本：

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

将颜色更改为图像路径。

于 2013-08-07T10:37:42.907 回答
-2 
   $(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 的背景会发生变化。因此，当您将鼠标悬停在图像上时，.staff 背景就会发生变化。我相信这就是你想要的？

于 2013-08-07T10:29:36.143 回答