很多同學問，你看他們那誰家的小誰做的那個導航，鼠標一滑過還有變化，他們怎么做的？

那今天我們來講一些更好玩的偽類，首先是 ：hover，這個講的是某元素被鼠標滑過的時候的樣式。當然如果不定義的話就是沒有變化嘍，就像我們前邊寫的那樣，但是如果我定義一下呢？

#nav .nav-item a:hover {
    background: #DDD;
}

然后我們去看看鼠標劃過的效果：

看到變化啦，嗯，圖上沒有鼠標指針，但也猜得出來，我的鼠標放在下載上他的背景色發(fā)生了變化。你看他的文字大小啊、顏色啊，什么什么的其他東東是不是都沒有變化？所以 :hover 是基于元素以前的樣式進行變化的，我們只要把變化的內容寫上就好了，相同的部分不需要重復的去定義。

原來鼠標滑過發(fā)生變化的代碼竟然這么簡單，曾經我們還當做一個什么什么的特效來看的??！那么我們就再來點稍微復雜哦，看我改寫成如下的樣式：

#nav .nav-item a:hover {
    height: 40px;
    padding-top: 5px;
    line-height: 40px;
    background: #DDD;
    border-bottom: 5px solid #999;
}

我一下修改了好多內容，看看真復雜！但是仔細分析一下也就明白了，高度改成了 40px，所以 line-height 也改成 40px，這是為了垂直居中所做的相應的修改，而剛才高度上減少的 10px 則通過頂部內補 5px，底部增加 5px 的邊框補回來了。因為上下是對稱著添加的，所以文字依然垂直居中（看起來似乎沒有變化），然后內補和邊框都算作元素的范圍之內（快遞箱以及里面的填充物都算作整個箱子的范圍之內），所以也不會影響 a 本身已經設定好的點擊范圍。

我們看看劃過效果：

就是醬紫的效果了，怎么樣？大家根據自己的理解修改上面的屬性試試看有什么變化？

然后再說幾個 鏈接元素常用的偽類：

:active 當前鼠標點下鏈接的時候

hover 當鼠標懸浮在元素上方時

link 當鏈接還未被訪問過時

visited 當鏈接被訪問過之后

現在我們也很少用這么多，設置一兩種就不少了，比如導航部分的鏈接，設置一個 :hover 和一個 :active 就差不多，這個幾個的用法一樣，大家可以自行進行各種慘無人道的變態(tài)實驗，以便使自己確實掌握這些偽類。

至此我們對導航條的美化也算簡單的告一段落，如果你愿意，可以開動腦筋看看還可以做些什么樣的美化，雖然我們現在學的 CSS 屬性不是很多，但是通過有機的結合以就可以做出很多養(yǎng)眼的效果，希望大家多動手練習一下哦～

那么是不是我們的導航到此就算做完了呢？不是的，其實還有一個小小的問題沒有解決。我們把瀏覽器窗口調小看一下哦～

你說，哎呀，怎么都出去？其實不是都出去了，而是根本就不在里面。不信你把 #nav 的高度去掉試試看，他的高度就會變?yōu)?0 ，根本沒有被里面的元素撐起來。為什么會這樣呢？因為里面的這些元素都進行了浮動，但是 #nav 并沒有浮動。

浮動的和沒有浮動的元素仿佛是不在一個頻道的兩群人，總覺的他們相互之間對不上頻率，那怎么對上頻率呢？兩個辦法：第一、浮動到底，要是所有的元素都浮動那自然就在一個頻率上了，但是想想都覺得超麻煩；第二、清除浮動，就是在浮動結束之后清除一下，表示我浮動完了，咱們還是好朋友哦，不許再鬧別扭啦，乖～

所以我們用完浮動之后一定要記得清除浮動，清除浮動的方法有很多，但是我們現在先來講一種，是最容易理解的哦。

首先 #logo 和后面兩個 ul ，以及 ul 里面的 li 都已經進行了浮動，那么在這樣的局部范圍內也算是全部浮動，于是他們之間相安無事，問題出在這些浮動的元素和外部沒有浮動的元素 #nav 之間，所以我們要在 #nav 的內部這些浮動元素之后加一個： <div class="clear"></div>,

于是變成了：

<div id="nav">
    <div id="logo">
        <a href="#">代碼能有多難？</a>
    </div>
    <ul id="nav-items">
        <li class="nav-item"><a href="#">首頁</a></li>
        <li class="nav-item"><a href="#download">下載</a></li>
        <li class="nav-item"><a href="#feature">特點</a></li>
        <li class="nav-item"><a href="#about">關于</a></li>
    </ul>
    <ul id="nav-items-r">
        <li class="nav-item"><a href="#signin">登錄</a></li>
        <li class="nav-item"><a href="#signup">注冊</a></li>
    </ul>
    <div class="clear"></div>
</div>

然后在 CSS 里面寫上：

.clear {
    clear: both;
}

這樣就可以了，為什么要這么寫呢，這樣定義以后，下次我們需要清除浮動的話，只需要復制 <div class="clear"></div> 過去就可以了，定義一次，可以多處使用，也算是很方便的，當然這種辦法會多出一個空白的 div，雖然不影響界面，但是強迫癥會比較難受，額……這個我們以后再講其他辦法。（強迫癥別殺我……）

好了，現在我們去掉 #nav 的高度看一下效果。

這樣就不會出來了……只是瀏覽器窗口較小的時候好難看………我們下節(jié)課再解決……（不要追殺我呀?。?/p>

本章學習卡片：卡片 24

本章代碼下載：本章代碼

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內容以主站為準：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經本人許可，禁止任何形式轉載。相關事宜請聯(lián)系： dms@zji.me