Question

我的网站上有一个列表，<li>背景是一个30％不透明度的1像素黑色图像，重复填充整个<li>。它有一个悬停，这是一个2％不透明度的1像素白色图像。

我希望悬停背景能够平滑地淡入（和退出），而不是立即出现悬停背景。

HTML

<ul>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 1</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 2</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 3</li>
</ul>

CSS

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    border-bottom: 1px solid #2f2f2f;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
}

我认为我想要的东西可以通过jQuery实现，但我不知道如何。

编辑：简单的说，我想要的只是让<li>的过渡顺利进行。

Answer 1

使用css3过渡最容易做到这一点：

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #2f2f2f;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -ms-transition: background 1s;
    transition: background 1s;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
    background: rgba(255,255,255,0.02);
}

请注意，透明色的rgba版本之间会发生转换。您可以使用jQuery实现相同的功能，但它更加复杂，并且不会像平滑一样动画。在IE中也不可能在透明颜色和rbga之间褪色，并且使用这种技术IE可以正常工作并且不会褪色（它会回落到不支持rgba的.png文件中）。

IE支持的方法，（支持自己）：

 <li id="wrap">
     <div id="content">
          Content
     </div>
     <div id="fade-1"></div>
     <div id="fade-2"></div>
 </li>

CSS

#content, #fade-1, #fade-2{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;       
    position: absolute;
}

#content{
    z-index: 3;
}

#wrap{
   position:relative;  
   width: 600px;
   height: 24px;
}

#fade-1{
   background: url('../images/black_op30.png');
   background:transparent url(../images/black_op30.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/black_op30.png',sizingMethod='scale');
   background: rgba(0,0,0,0.3);     
   border-bottom: 1px solid #2f2f2f;   
   z-index: 1;    
}
#fade-2{
   display:none;
   background: url('../images/white_op2.png') repeat;
   background:transparent url(../images/white_op2.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/white_op2.png',sizingMethod='scale');
   background: rgba(255,255,255,0.02);
   border-bottom: 1px solid #2f2f2f;
   z-index: 2;
}

JS：

$('#wrap').hover(function(){
     $('#fade-1').stop().fadeOut();
     $('#fade-2').stop().fadeIn();
}, function(){
     $('#fade-1').stop().fadeIn();
     $('#fade-2').stop().fadeOut();
});

http://www.webmasterworld.com/forum83/7828.htm http://api.jquery.com/hover/ http://api.jquery.com/stop/ http://api.jquery.com/fadeOut/ http://api.jquery.com/fadeIn/

然而，在所有其他浏览器中，这种方法仍会比CSS3方法产生更糟糕的结果，因此理想情况下，您将使用两者并使用if语句控制HTML，CSS和JS来检测IE。另外IE9确实支持rgba但不支持转换，所以对于最好的世界场景，你将拥有ie6-8的IE版本，一个使用jQuery颜色插件的版本：

http://www.bitstorm.org/jquery/color-animation/

用于IE9，简单的CSS3用于所有其他浏览器。

或者你可以说，嘿，交叉渐变对我的设计并不重要，如果那些没有更新浏览器的人错过了，那就没关系。＆＃39;这是我推荐的内容。

Answer 2

我希望这会给你一个想法和一个启动，非常容易

        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
          $(".yourCssClassNameHere").hover(funcOver, funcOut);
              function funcOver() {
                $("#Id of You want to fade in").fadeIn(100);//time is in ms
                }
               function funcOut() {
                $("#Id of You want to fade out").fadeOut(100);
                 }
           </script>

此解决方案的另一个变体可以是使用@Joseph Torraca在回复中显示的匿名函数。

要在悬停时进行特定的<li>淡出，我已对其进行了测试，请尝试以下操作：

  <ul>
   <li onmouseover="$(this).fadeOut()">Hover me to disappear</li>
  </ul>

有关详细信息：
http://api.jquery.com/hover/
http://www.w3schools.com/jquery/event_hover.asp
的淡入
http://api.jquery.com/fadeIn/
的淡出
http://api.jquery.com/fadeOut/

Answer 3

一种方法是使用jQuery。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $('.yourclasshere').hover(function() {
        $('#idofelement').fadeIn(300); // Time in milliseconds
    , function() {
        $('#idofelement').fadeOut(300); // Time in milliseconds
    });
</script>

Answer 4

我认为如果你必须使用css2和不同的浏览器，imho最好的方法是使用Jquery / JQueryUI

请参阅http://jsfiddle.net/igambin/4CfC6/

你可能不得不稍微玩一下......悬停的想法也有它的价值，也许组合将是你正在寻找的

如何让悬停背景平滑淡入淡出？

4 个答案: