有没有一种简单的方法可以使用 jQuery 淡入 css :hover 背景？

Posted 2023-05-08

【中文标题】有没有一种简单的方法可以使用 jQuery 淡入 css :hover 背景？

【英文标题】：Is there an easy way to use jQuery to fade in a css :hover background?

【发布时间】：2011-06-16 08:11:26

【问题描述】：

我有一个带有 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;

【问题讨论】：

是的。将背景放在不同的元素上并淡入该元素。任何浏览器或 javascript 库都不支持背景图像不透明度。

感谢您的评论/想法。我会玩弄这个概念。但是问题：当我将鼠标悬停在它上面时，我可以让它淡入和淡出，但是我如何让它加载透明并在悬停时淡入？

想通了。感谢您的帮助，您的建议有所帮助。

【参考方案1】：

是的！！！你可以用这个...

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

有关更多信息，您应该查看本教程。fadeIn

【参考方案2】：

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

查询代码：

    $('#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">

DEMO

【讨论】：

谢谢。我玩了一些。这对淡化图像非常有效，但不幸的是，背景却不是这样。

【参考方案3】：

我想通了，发现最好的方法是使用两张图片而不是背景：

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');
        );