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;}