上週，我們學習了運用:hover複合選擇器，製作鼠標懸停在導航欄上的樣式變化效果。在課後作業中，我要求同學們把導航欄放入店鋪首頁，運用:hover選擇器製作鼠標懸停在導航欄的效果。
先來回顧一下知識點。
:hover選擇器是CSS樣式中的複合選擇符，冒號前面的內容代表鼠標懸停的位置。它可以作用於網頁中的所有元素，如超鏈接
<table>、單元格 當然網頁元素名稱也可以是其他選擇符：
例如類選擇符，.apple:hover代表鼠標懸停在類選擇符上的效果，當鼠標經過“class=apple”的網頁內容時會發生的樣式變化；ID選擇符，#orange:hover代表鼠標懸停在ID是orange的網頁內容時發生的樣式變化。
與此同時，冒號前的網頁元素名稱也可以進行重組，例如要設置ID為#tb表格中的超鏈接，在鼠標懸停時的樣式變化，我們可以把網頁名稱設置為#tb a:hover。多個選擇符疊加時，使用空格分隔即可。
那麼問題來了，許多同學掌握了製作單個導航欄的方法，一旦將導航欄放入整體頁面卻出現了很多問題。比如小佳同學就出現了“當鼠標經過導航欄時，是一整排全亮，甚至連店招所在的表格也跟著發生樣式變化”的問題。這是為什麼呢？
好，接下來，我們來看看小佳同學的作業：
「視頻解析版本」
「文字解析版本」
顯然小佳的作業中，鼠標移入導航欄，出現了一整行的變化，而非單個單元格的變化，並且頂部店招區域也出現了樣式變化。
當我們檢查小佳的代碼時，我們發現:hover選擇器前的網頁內容是td，這就意味著鼠標經過網頁中所有的單元格都會發生以下所設置的樣式變化。
這裡的td:hover是鼠標懸停在單元格（列）的效果。而我們之前做的是一行N列的導航欄，不存在其他多餘單元格，因此在這個情況下我們可以用td:hover來實現鼠標經過單元格的效果。
但是，你看下面的代碼，有多少個td呢？我們這裡多行多列，並且你在第二行的單元格中嵌套了表格。因此，如果用td:hover，頁面中所有的td都會有鼠標經過的效果，因此你會發現整個頁面都會出現鼠標經過變紅色的效果。所以，接下來，我們要思考如何把td替換一下。
:hover前的td該如何被替換呢？
方法1：
新建CSS樣式，類型為類選擇器（命名為.daohang，為導航欄鼠標未經過時的樣式）設置好之後，選中導航欄單元格，並右鍵選擇應用。設置後代碼如下：
應用後，你可以直接到代碼區域把原來的td替換為.daohang。也可以新建CSS規則，類型為複合樣式，名稱為.daohang:hover。
方法2：
將表格的名稱（ID）設置為tb1，那麼是tb1這個表格中的單元格樣式變化，因此我們可以將名稱設置為 “#tb1 td:hover”，這樣同樣可以實現之前的效果。
好了，以上就是:hover選擇器在網頁中的應用，你學會了麼？
如果你也想試一試，可以回覆關鍵詞“網頁”獲取圖片素材和Dreamweaver CS6軟件。
Ps:以上內容與網課同步，部分知識點還未涉及，因此部分代碼冗餘，請專業人士多多諒解哦~
-END-
作者介紹：卓小爾，思維導圖學習實踐者，95後職業教育教書匠
成長 | 教育 | 旅行
"
閱讀更多 卓小爾教育說 的文章
