Fade from background-image to hover

Question

Я хочу, чтобы мое первое фоновое изображение затушевало, которое должно использоваться при наведении курсора, а затем снова отключить его, как только пользователь удалит их. Может использовать 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> 

Argh, не может получить право форматирования ...

Answer 1

Here's a good start I put together in jsbin. Я подключил только значок новостей в качестве демонстрации. Он не является пуленепробиваемым, оставляя элемент до завершения перехода, оставив элемент в неправильном состоянии, но я не знаю, как обращаться с этим. jquery может иметь лучшие методы, чем fadeOut/fadeIn для этой работы. Также вы должны сделать :active фоном ! important, чтобы изображение всегда отображалось при нажатии, которое я забыл сделать перед сохранением.

также вы не можете иметь <a> элементы, висящие за пределами <li> элементы. сделайте ссылки display:block, чтобы они заняли пустое пространство внутри элемента списка, а затем вы можете взломать hacky onclick="window.location...".

Answer 2

@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()