javascript - 翻转不工作

Question

我在 Dreamweaver（创意云）中创建了一个翻转图像，但是当我在实时模式下预览它时，图像不会在悬停时交换。

这是我的代码：

<div id="facebook"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','/images/facebookover.png',1)"><img src="/images/facebookup.png"  id="facebook" /></a></div> 

和我的 JavaScript

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
</script>

Answer 1

你可以只使用 CSS 悬停。Javascript 并不是真正需要的：

#facebook{
 width:100px;
 height:100px;
 background-image:url('image1.jpg');
}
#facebook:hover{
 background-image:url('image2.jpg');
}

您的 HTML：

<div id="facebook">Text here</div>

工作示例：http: //jsfiddle.net/NRFQ5/

Answer 2

如果您喜欢过渡，只需将其添加到您的样式中：

#facebook{
  transition: background-image 0.5s ease;
  -moz-transition: background-image 0.5s ease;
  -webkit-transition: background-image 0.5s ease;
 ...
}