我正在尝试将元素(例如background
)悬停在另一个元素(例如body
)上时切换元素的nav
图像,使用jQuery在两个图像之间进行某种淡入淡出过渡。
我一直在stackoverflow上阅读过类似的问题,并且几乎在没有运气的情况下尝试了几乎所有示例。
资源资源
index.html
styles.css
scripts.js
background.png
background-hover.png
片段
index.html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
styles.css
body {
background: url('background.jpg') no-repeat;
}
scripts.js
$('nav')
.mouseenter(function(){
$('body').css("background", "url('background-hover.jpg') no-repeat");
})
.mouseleave(function(){
$('body').css("background", "url('background.jpg') no-repeat");
});
任何建议将不胜感激。在此先感谢。
最佳答案
如果要在背景之间进行淡入淡出过渡,则不能仅将background-image
从一个更改为另一个。您至少需要创建一个其他元素,然后您才能淡入和淡出。例如这样:
var d = $('<div />').width($('body').width())
.height($(window).height())
.attr('id','fakebody').hide().appendTo($('body'));
$('nav').hover(function(){
$(d).fadeIn();
},function(){
$(d).fadeOut();
});
#fakebody{
position:absolute;
top:0;
left:0;
background: url(background.jpg);
z-index:-99;
}
示例:http://jsfiddle.net/niklasvh/bXMKJ/
如果您希望当前图像逐渐淡出,而另一幅逐渐淡入,那么您将需要2个虚拟元素,因为您不能使
body
淡入淡出(至少具有期望的结果)。如果只希望
background-image
从一个更改为另一个,则可以通过删除mouseenter函数末尾的;
来修复代码,如下所示:$('nav').mouseenter(function(){
$('body').css("background", "url('background-hover.jpg') no-repeat");
}).mouseleave(function(){
$('body').css("background", "url('background.jpg') no-repeat");
});
示例:http://jsfiddle.net/niklasvh/sC5rd/