jQuery Forum

I'm using sprites and jQuery to animate links on a mouse enter and mouse leave events.

Here's my code:

3. a#home {
4. background: url(images/blinksprite.png) no-repeat 0 0;
5. }
6. a#portfolio {
7. background: url(images/plinksprite.png) no-repeat 0 0;
8. }
9. a#contact {
10. background: url(images/clinksprite.png) no-repeat 0 0;
11. }
12. 
    
13. 
    
14.  $(document).ready(function(){ 
15. 
    
16.   $(".menu a").live('click',function(){
18. $(this).css('backgroundPosition', '0 -85px');
20.  });
21.   
22.     $( '.menu a' ).mouseenter(function() { 
23.      $(this).css('backgroundPosition', '0 -85px');
24. 
    
25.  });
26.  
27. $( '.menu a' ).mouseleave(function() { 
28.     $(this).css('backgroundPosition', '0 0');
29. 
    
30.  });
32. });  
34. 
    
35. <ul class="menu">
36.   <li ><a  class="active" id="home" href="">
37.     <div class="heading" style="position:relative; top:85px;">Home</div>
38.     </a></li>
39.   <li ><a  id="portfolio" href="2.html">
40.     <div class="heading" style="position:relative; top:85px;">about</div>
41.     </a></li>
42.   <li ><a  id="contact" href="3.html">
43.     <div class="heading" style="position:relative; top:85px;">contact</div>
44.     </a></li>
45. </ul>

The mouse enter and leave events are all working great.

What I'm struggling with is when the user clicks on a link, I want the mouse enter and mouse leave events for the clicked link to stop and for the background image to stay at 0 -85px. I tried that in the click event above but I have no idea how to go about this.

Thanks

Dan