Question

我目前正在使用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>

因此，当它正常工作时，它会改变背景，然后在鼠标移动时将其更改回来，但是我希望它能够淡入淡出。我该怎么做呢？

编辑：尝试下面的两个解决方案，似乎既不起作用也不适用

Answer 1

这是一个很好，干净的方法。

http://jsfiddle.net/Diodeus/gYyBL/

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

Answer 2

我喜欢你的解决方案。 Check this out可以选择您要完成的淡入淡出效果。

祝你好运！

编辑：https://stackoverflow.com/a/1055432/752527似乎也是一个很好的清洁解决方案。

使用javascript翻转图像时更改页面背景

2 个答案: