jquerymouseover，mouseout并单击

我有一个精灵菜单，我正在使用jquery进行鼠标悬停、鼠标悬停和点击。mouseover和mouseout工作正常，但我想知道的是，如果我单击并选择一个菜单，然后更改背景位置。这是我现在的问题，它不起作用，可能是因为一旦我点击一个菜单，鼠标仍然会被触发

这是我的jquery

$(document).ready(function(){
    $(function(){
        $('#a a')
            .css( {backgroundPosition: "0 -33px"} )
            .mouseover(function(){
                $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate({backgroundPosition:"(0 -33px)"}, {duration:200, complete:function(){
                    $(this).css({backgroundPosition: "0 -33px"})
                }})
            })
    });
});

我的css

h2  {clear:both;padding-top:20px;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:120px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;}
li a:hover, li a:focus {background-position:0 0;}
li a:active {background-position:-66px 0;}
#a a {background:url(<?php echo base_url() ?>images/tabs.png) repeat 0 -33px;}

h2{clear:both；padding top:20px；}
ul{列表样式：无；边距：0；填充：0；}
li{float:left；宽度：120px；边距：0；填充：0；文本对齐：居中；}
LIA{显示：块；填充：5px10px；高度：100%；颜色：#FFF；文本装饰：无；}
li a:悬停，li a:焦点{背景位置：0；}
li a:活动{背景位置：-66px 0；}
#a{background:url（images/tabs.png）重复0-33px；}

我的html

<h2>Top down</h2>
    <ul id="a">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>        
    </ul>

自上而下

当前的jQuery核心无法设置背景位置动画，除非您使用jQuery背景位置效果插件-