有没有一种简单的方法可以使用jQuery在css:hover背景中淡出?

有没有一种简单的方法可以使用jQuery在css:hover背景中淡出?,jquery,css,hover,jquery-hover,Jquery,Css,Hover,Jquery Hover,我有一个带有CSS的IMG,它使用:hover来显示背景。有没有一种简单的方法可以使用jQuery在背景中淡出而不是立即出现 我目前的代码是: HTML: <img id="home-logo" src="path/logo-home.png">` CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;} 是的!!!你可以用这个 $('#home-logo').hover

我有一个带有CSS的IMG,它使用:hover来显示背景。有没有一种简单的方法可以使用jQuery在背景中淡出而不是立即出现

我目前的代码是:

HTML: <img id="home-logo" src="path/logo-home.png">`
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;}

是的!!!你可以用这个

$('#home-logo').hover(function(){
  $(this).fadeIn('slow', function() {
  //do something  
  });
 });

有关更多信息,请参阅本教程

也许你需要淡化你的不透明度,在这种情况下,你可以使用fadeTo方法。 第一个参数是持续时间或速度,第二个参数是不透明度的值

JQUERY代码:

    $('#home-logo').hover(
    function(){
      $(this).fadeTo('slow',0.2);
    },
    function(){
      $(this).fadeTo('slow', 1.0);
    });
HTML代码:

<img id="home-logo" src="path/logo-home.png">

我发现最好的方法是使用两张图片而不是背景:

HTML:
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif">

CSS:
    #home-link { cursor:pointer; }
    #home-fade { display:none; }

JS:
    $(document.body).hover(function () {
          $("#home-fade").fadeIn('slow');
        },function(){
          $("#home-fade").fadeOut('slow');
        });

对将背景放在不同的元素上,然后淡入该元素。任何浏览器或JavaScript库都不支持背景图像不透明度。感谢您的评论/想法。我会反复考虑这个概念。问题:当我把鼠标悬停在它上面的时候,我可以让它淡入淡出,但是我如何让它加载透明和带着鼠标悬停的淡入淡出呢。谢谢你的帮助,你的建议很有帮助。我玩了一会儿。这对淡入图像效果很好,但对背景效果不佳。