如何使用jquery实现以下效果

Question

当没有选择其他两个tab，鼠标移上去会变色，如果鼠标移到选中的tab不会变色

代码：

<ul class="fixed_bar" style="">
    <li class="status_on active">
        <a href="#status1">产品介绍</a>
    </li>
    <li class="status_on">
        <a href="#status2">商品评价<span>(0)</span></a>
    </li>
    <li class="status_on">
        <a href="#shbz">售后服务</a>
    </li>
    <div class="statusBtn" style="display:none;">
        <a href="javascript:addToCart_bak(77)" class="statusBtn1" title="加入购物车"></a>
    </div>
</ul>

$( document).ready(function(){
  $('.fixed_bar').find('li').click(function(){
    $('.fixed_bar').find('li').removeClass('active');
    $(this).addClass('active');
  });                                                                    
})

这段代码是实现了点击tab变成红色，灰色tab字体变橙色的不知道怎么实现

Answer 1

.tab {
    background-color: gray;
}
.tab:hover {
    background-color: yellow;
}
.tab.select {
    background-color: red;
}

注意下最后一条，如果你的类名是class="tab select"这样叠加使用的，一定记得中间不要有空格，否则会变成包含选择符就废了。

Answer 2

鼠标点击时,弄一个变量
然后鼠标移动时的事件里判断一下变量.来做分支

Answer 3

没有被点击的，即灰色tab处理：
.status_on :hover{

color:#FF9900

}