Question

当用户将鼠标悬停在页面上的某个项目上时，我正在尝试更改div的背景图像。我知道必须有更好的方法来做到这一点......这就是我现在所拥有的。

＆＃39;＃11＆＃39;是将要盘旋的div。

＆＃39;＃treeBG＆＃39;是背景图像应该改变的div

当前图片是bg.jpg，我想要淡出并模糊.jpeg淡入，取而代之。

＆＃13;

$(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")');
  });
});

＆＃13;

我的图像更改没有问题，我只是希望它有一个淡入淡出过渡看起来更好。

有什么想法吗？

Answer 1

$('#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');
});

尝试这样做

Answer 2

以下是演示：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');
  });
});

Answer 3

在我的情况下＃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")'});
  });

Answer 4

使用纯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;
}

图片在悬停

4 个答案: