從背景圖像淡出到懸停

我想將我的第一個背景圖像淡入一個應該用於懸停的圖像，然後在用戶刪除它們的鼠標後再關閉。可以使用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

從背景圖像淡出到懸停

回答

相關問題