图片在悬停

时间:2016-06-24 22:48:47

标签: javascript jquery html css

当用户将鼠标悬停在页面上的某个项目上时,我正在尝试更改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")');
  });
});




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

有什么想法吗?

4 个答案:

答案 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;
}