当用户将鼠标悬停在页面上的某个项目上时,我正在尝试更改div的背景图像。我知道必须有更好的方法来做到这一点......这就是我现在所拥有的。
'#11'是将要盘旋的div。
'#treeBG'是背景图像应该改变的div
当前图片是bg.jpg,我想要淡出并模糊.jpeg淡入,取而代之。
$(function() {
$('#11').hover(function() {
$('#treeBG').css('background-image', 'url("blur.jpeg")');
$('#treeBG').css('width', '100%');
$('#treeBG').css('background-size', 'cover');
$('#treeBG').css('background-repeat', 'no-repeat');
}, function() {
// on mouseout, reset the background image
$('#treeBG').css('background-image', 'url("blur.jpeg")');
});
});

我的图像更改没有问题,我只是希望它有一个淡入淡出过渡看起来更好。
有什么想法吗?
答案 0 :(得分:0)
$('#treeBG').fadeOut('slow',function(){
$('#treeBG').css('background-image', 'url("blur.jpeg")');
$('#treeBG').css('width', '100%');
$('#treeBG').css('background-size', 'cover');
$('#treeBG').css('background-repeat', 'no-repeat');
$('#treeBG').fadeIn('slow');
});
尝试这样做
答案 1 :(得分:0)
以下是演示:https://jsfiddle.net/y4orwqqu/1/
首先,你的div id不应该以数字开头。所以我把它更新为文本。
$(function() {
$('#eleven').hover(function() {
$('#treeBG').css('background', '#000000');
$('#treeBG').css('width', '100%');
$('#treeBG').css('background-size', 'cover');
$('#treeBG').css('background-repeat', 'no-repeat');
}, function() {
// on mouseout, reset the background image
$('#treeBG').css('background', '#FFFFFF');
});
});
答案 2 :(得分:0)
在我的情况下#11数字ID不起作用......所以我改变了#eleven。试试这段代码:
$('#eleven').hover(function(){
$('#treeBG').fadeOut('slow',function(){
$(this).css({
'background-image': 'url("blur.jpeg")',
'width' : '100%',
'background-size' : 'cover',
'background-repeat':'no-repeat'
}).fadeIn('slow');
});
},function(){
$('#treeBG').css({
'background-image': 'url("blur.jpeg")'});
});
答案 3 :(得分:0)
使用纯Css是最干净的方法:
<强>的style.css 强>
<!-- Change #11 for #eleven or whatever which don't start with numbers. Check out how to use IDs in Css. I recommend you use classes instead Ids by using styles -->
#eleven {
background-color: blue;
padding: 1%;
width: 50%;
text-align: center;
color: white;
}
<!-- This syntaxis says: change #threeBG when #eleven is hover -->
#eleven:hover ~ #treeBG {
background-image: url("blue.png");
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}