Fade from background-image to hover

Question

Hi, I'd like to fade my first background-image into one that is supposed to be used on hover and then off again once the user removes their mouse. Can use jQuery.

Here is what I have so far:

    <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/"&gt;&lt;/a&gt;&lt;li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"&gt;&lt;a href="http://www.ballpointtech.com/category/guides/"&gt; </a></li>

    <a href="http://www.ballpointtech.com/category/news/"&gt;&lt;/a&gt;&lt;li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"&gt;&lt;a href="http://www.ballpointtech.com/category/news/"&gt; </a></li>
    <a href="http://www.ballpointtech.com/category/reviews/"&gt;&lt;/a&gt;&lt;li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"&gt;&lt;a href="http://www.ballpointtech.com/category/reviews/"&gt; </a></li>
    <a href="http://www.ballpointtech.com/category/tipstricks/"&gt;&lt;/a&gt;&lt;li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"&gt;&lt;a href="http://www.ballpointtech.com/category/tipstricks/"&gt; </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, can't get the formatting right...

Answer 1

@hunter

this is ignoring the desire to fade.

$('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);
    }
    });




  });

this more or less gives the big picture. not tested or proofed. if you give this a shot and put it on jfiddle i will help you through it. you also need to make a .mouseleave() function

Answer 2

Here's a good start I put together in jsbin. I wired up just the news icon as a demo. It's not bulletproof as leaving the element before the transition completes will leave the element in the wrong state but I don't know how to address that offhand. jquery might have better methods than fadeOut/fadeIn for this job. Also you'll want to make the :active background ! important so that image is always visible when clicking, which I forgot to do before saving.

also you can't have <a> elements hanging around outside of the <li> elements. make links display:block so they take up the empty space inside the list item and then you can junk the hacky onclick="window.location...".