我目前正在使用JavaScript,但如果您有更好的解决方案,我全都是耳朵。所以我有我的包装和它的背景,其中包括我的所有内容,包括一个按钮,我想当悬停淡入淡出来改变包装/页面的背景。当使用javascript翻转图像时更改页面背景
我的CSS看起来像这样
#wrapper {position: absolute; min-width:550px; width:100%; height:100%; background: url(img/bg.jpg) no-repeat center top;}
,然后我的HTML
<div id="wrapper">
<div id="content">
<div class="logo">
<img src="img/logo1.png" />
</div>
<div class="button">
<img src="img/dj.png" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')"/>
</div>
</div>
</div>
,然后我的javascript
<script type="text/javascript">
function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
}
</script>
所以因为它位于它的工作原理,它改变了背景和然后在mouseout上改回它,但是我希望它淡入淡出。我将如何去做这个?
编辑:尝试这两种解决方案下面,既不似乎工作或申请
对于鼠标移开你的'backgroundImage'应该是'none'如果我正确理解你的问题。如果不是,谨慎解释更多? – 2012-01-04 20:05:28
不,因为如果它没有,它会删除原始背景图像,这不是我想要做的 – 2012-01-04 20:19:25