我试图在鼠标悬停时更改我的背景图像,图像在变化,但过渡闪烁,淡入/淡出似乎不起作用......
代码:
CSS:
.background {
position: fixed;
top:100px;
width: 100%;
height: 100%;
background: url(../img/angst.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
js:
$( ".project_link_01" )
.mouseover(function() {
$('.background').css('backgroundImage','url(../img/test.png)').fadeIn();
})
.mouseout(function() {
$('.background').css('backgroundImage','url(../img/angst.png)');
});
最佳答案
尝试利用 css
:hover
.background {
position: fixed;
top: 100px;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/50/50/nature) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: background 500ms;
}
.background:hover {
background: url(http://lorempixel.com/50/50/technics) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<img src="http://lorempixel.com/50/50/technics" style="display:none;" />
<div class="background"></div>
关于jquery - 背景图像在鼠标悬停时闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31358114/