小毅的blog：http://andymao.com/

前天網上有個朋友發給我一個頁面讓我幫她看一下為什么鼠標翻轉實現不了。我打開源文件看了一下，發現她根本沒有掌握一個鼠標翻轉的特性。并且對于傾斜導航的思考也不足。雖然我當時看出來了這些問題，但是由于手上一個項目正在收尾一時也沒有時間向她一個講解。正好昨天工作忙完了，現在又拿起那個文件看了一下，發現能過這個事件可以講解好多個知識點，有一些地方比較容易讓人不太注意，但是確實是非常關鍵的。下面我們通過制作一個傾斜的鼠標翻轉導航為過程來針對不同的地方做出一些提示，希望可以幫助一些對于鼠標翻轉導航制作上還存在疑問的朋友。

我們先看一下想要實現的效果，當然在沒做之前這些只能是存在于我們的腦子或是草圖上。我們首先要想到它是個什么樣子，然后才能去分析我們想要實理的效果是應該如何去做，閑言少敘，先看圖：

我們看到上圖，可以會覺得好像并沒什么，好像很容易做。好我們來細細的分析一下這個效果。我們用標準來實現就不能直接插入一張圖片在HTML里。用標準來做就需要把圖片作為背景的方式用CSS進行調用。那么我們來看一下這樣的導航是否可以直接就那么直接調用，其中是不是還有什么問題出現？下面請看一下這個導航效果的放大圖：

大家注意上圖中的“危險區”很明顯，如果我們把兩個傾斜的正塊放在一起就必然會有一段重復區，我們現在的CSS還不支持異形處理。要解決這個問題就必需要使得這兩個方塊進行重疊。重疊就需要把他們放在不同的層次上。這就要用到CSS中的定位：“position : static | absolute | fixed | relative ”。關于position的詳細請查看蘇昱的《CSS2中文手冊》，關于如何定位請查看我的《解讀absolute與relative》

做鼠標翻轉我們通常會把所有的背景做成一個圖，然后通過CSS來設置不同標簽下的圖片的不同位置。也許有人就會認為這個導航 的背景圖應該是這樣的：