从背景图像淡出到悬停

我想将我的第一个背景图像淡入一个应该用于悬停的图像，然后在用户删除它们的鼠标后再关闭。可以使用jQuery。从背景图像淡出到悬停

这是我到目前为止有：

<ul style="top: -70px; display: block; padding-left: 205px;" id="cats-menu" class="nav superfish sf-js-enabled"> 
    <a href="http://www.ballpointtech.com/category/guides/"></a><li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"><a href="http://www.ballpointtech.com/category/guides/"> </a></li> 

    <a href="http://www.ballpointtech.com/category/news/"></a><li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"><a href="http://www.ballpointtech.com/category/news/"> </a></li> 
    <a href="http://www.ballpointtech.com/category/reviews/"></a><li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"><a href="http://www.ballpointtech.com/category/reviews/"> </a></li> 
    <a href="http://www.ballpointtech.com/category/tipstricks/"></a><li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"><a href="http://www.ballpointtech.com/category/tipstricks/"> </a></li> 
</ul> 

    <style type="text/css"> 
    #li_guides { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Still1.png'); 
     width:130px; 
     height:92px;  
} 
    #li_guides:hover { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Rollover1.png'); 
    } 
#li_guides:active { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Click2.png'); 
    } 
#li_reviews { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Still.png'); 
     width:130px; 
     height:92px;  
} 
    #li_reviews:hover { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Rollover.png'); 
    } 
#li_reviews:active { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Click.png'); 
    } 
#li_news { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Still.png'); 
     width:130px; 
     height:92px;  
} 
    #li_news:hover { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Rollover.png'); 
    } 
#li_news:active { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Click.png'); 
    } 
#li_tipstricks { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-still.png'); 
     width:130px; 
     height:92px;  
} 
    #li_tipstricks:hover { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-rollover.png'); 
     } 
    #li_tipstricks:active { 
     background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-click.png'); 
    } 
</style>

哎呀，不能得到正确的格式...

来源

2010-09-22 Sam

太....很多...代码... – 2010-09-22 17:03:45

只是一个想法，但http://jsbin.com是一个*精彩*的地方... =） – 2010-09-22 17:05:44

Here's a good start I put together in jsbin。我只是将新闻图标作为演示连接起来。这并不是防弹的，因为在转换完成之前离开元素会使元素处于错误的状态，但我不知道如何解决这个问题。对于这份工作，jquery可能比fadeOut/fadeIn更好。另外，您还需要制作:active背景! important，以便点击时图像始终可见，而在保存之前我忘记了这一点。

也不能有<a>元素挂在<li>元素的外面。使链接display:block，以便他们占据列表项内的空白空间，然后你可以垃圾哈克onclick="window.location..."。

来源

2010-09-22 18:47:15 lincolnk

这是一个很好的开始:)。然而，是否可以淡入对方，而不是淡出和淡入？此外，我还没有找到显示活动图像（基本onclick） – Sam 2010-09-23 01:20:45

具有交叉渐变将需要单独的图像 - 可能是2个div，然后在其上的空''。每个div都会分配一个背景图像，并且您可以同时调用淡入淡出方法。对于“主动”图像，您可以将图像作为“”元素的背景图像显示在其他元素的顶部。 – lincolnk 2010-09-23 05:33:24

为活动图像，我不需要做点像 onclick？ – Sam 2010-09-23 08:37:59

@hunter

这是无视褪色的愿望。

$('your.item').mouseenter(function(){ 
    $('your.item').stop().animate({opacity: 0},200,function(){ 

      $('your.item').attr('src','/new/image.jpg'); 
      $('your.item').stop().animate({opacity: 1},200); 
    } 
    }); 




    });

这或多或少给出了全貌。未经测试或证明。如果你给这个镜头并把它放在jfiddle上，我会帮你通过它。您还需要生成.mouseleave()函数

来源

2010-09-22 18:14:48

从背景图像淡出到悬停

回答

相关问题