jQuery与CSS结合制作tab效果有一个很重要的地方需要注意。

   今天在写一个tab效果时遇到一个问题，迷惑了一会，以前同一个效果写过很多回，都没出现这个问题。刚开始还真有点二丈的和尚摸不着头脑，不知道这是怎么回事，心里犯嘀咕，这里从来都没有出过bug呀？？？

   问题描述与分析：在选项卡切换的时候，有class属性名为“selected”的相鼠标经过时，也会出现“hover”的效果。正常情况下是选中的相不会有鼠标经过的效果，只有没有选中的相才会有鼠标经过的效果。出现这个问题，我首先看jq的代码，发现没有问题，一丁点问题都没有。半天之后，我想，难道是我的CSS有问题。想到这里，就是关键了。问题还真的出在这里。其实选中与不选中都有"hover"事件的，只是看他们表现的是哪个样式。这个时候应该让".selected"的样式写在".hover"样式的后面，因为在CSS里，优先级的关系，后写的优先于先写的，如果选择器级别一样的话。

代码呈现：

div:

<div class="tab">                    <div class="tab_menu">                        <ul>                            <li class="selected">产品属性</li>                            <li>产品尺码表</li>                            <li>产品介绍</li>                        </ul>                    </div>                    <div class="tab_box">                        <div>                            沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。                        </div>                        <div class="hide">                            来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，曲摆的现代人性化裁减，相得益彰，浑然天成。                        </div>                        <div class="hide">                            世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。                        </div>                    </div>                </div>

JQ:

var $div_li=$(".tab_menu ul li");    $div_li.click(function(){        $(this).addClass("selected")            .siblings().removeClass("selected");        var index=$div_li.index(this);        $(".tab_box div").eq(index).show()            .siblings().hide();    }).hover(function(){        $(this).addClass("hover");    },function(){        $(this).removeClass("hover");    });

CSS:

.tab_menu ul li{    float:left;    width:auto;    margin-right:4px;    border:1px solid #898989;    border-bottom:none;    padding:1px 6px;    background:#f1f1f1;    cursor:pointer;}.tab_menu ul li.hover{    background:#dfdfdf;}.tab_menu ul li.selected{    color:#fff;    background:#6D84B4;}