Question

标题

在使用IMG元素时，我已经看到很多方法：

<img src="blah" id="get" onmouseover="newImage()" onmouseout="oldImage()

Javavscript

function newImage() { document.getElementById(get").src="blah2"}
function oldImage() { document.getElementById("get").src="blah"}

但是我将我的图像保存在CSS background-image: url()内的id：

<div id="image"

我如何应用相同的原则但是当图像在CSS上而在div id

上时

新的JAVASCRIPT请不要框架。

Answer 1

你不需要JavaScript（但我在下面给出了一个JavaScript替代方案），只需使用CSS :hover伪类。

#get {
    background-image: url(/path/to/image/when/not/hovering.png);
}
#get:hover {
    background-image: url(/path/to/image/when/hovering.png);
}

示例：此div正常显示您的用户图标，如果您将其悬停在其中，则会显示我的：

＆＃13;

#get {
  width: 50px;
  height: 50px;
  background-image: url(https://graph.facebook.com/950389301719024/picture?type=small);
}
#get:hover {
  background-image: url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG
);
}

＆＃13;

<div id="get"></div>

＆＃13;

但如果你真的希望使用JavaScript，它与您引用的代码非常相似，那么您只需更改元素上的.style.backgroundImage而不是更改.src：

＆＃13;

function startHover(element) {
  element.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)";
}
function stopHover(element) {
  element.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)";
}

＆＃13;

#get {
  width: 50px;
  height: 50px;
}

＆＃13;

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)" onmouseover="startHover(this)" onmouseout="stopHover(this)"></div>

＆＃13;

但我不鼓励使用onxyz属性;改为使用现代事件处理：

＆＃13;

(function() {
  var div = document.getElementById("get");
  div.addEventListener("mouseover", function() {
    div.style.backgroundImage = "url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=50&d=identicon&r=PG)";
  }, false);
  div.addEventListener("mouseout", function() {
    div.style.backgroundImage = "url(https://graph.facebook.com/950389301719024/picture?type=small)";
  }, false);
})();

＆＃13;

#get {
  width: 50px;
  height: 50px;
}

＆＃13;

<div id="get" style="background-image: url(https://graph.facebook.com/950389301719024/picture?type=small)"></div>

＆＃13;

使用addEventListener，这是所有现代浏览器都支持的（不是IE8，IE9-IE11，它们已经破坏了＃34;兼容性＆＃34;模式）。如果您需要支持这些，this answer有一个功能，您可以在没有库的情况下用于跨浏览器事件处理。

使用javascript悬停时更改图像

1 个答案: