這篇已經說好久，今天總算生出來了，不過沒弄的很詳盡就是。基本上我這次的範例是比較適合用在固定的東西，例如導覽列，或是選單目錄之類的東西，我的範例本身是套在導覽列上很方便啦^^，如果是行內物件的話（可以用在連結之類的），我還要做些測試。

廢話不多說，要製造一個mouseover的放大效果，基本的作法很簡單，就是利用:hover這個選擇子來把元素放大，讓我們來看看光這樣子會是怎樣，範例一。

我製造了四個常寬都是50px的元素（我用標準的算法，是加上paddin值的長寬），雖然是span標籤，但是因為我用了display: block;這個屬性，所以他們現在都是block物件了，也因此我需要用float: left;才能讓他們並排，並且我設定他們在滑鼠移過去時會讓長寬都變成100px。這樣就完成最基本的設定了，不過還有幾個問題，第一是下面的內容會隨著放大的效果上下移動，第二是元素之間的左右位置也會因為放大而跑來跑去，第三則是框線的問題，中間三條線特別粗。

我們先來解決第一個問題，要處理這個問題很間單，只要指定margin-bottom: -50px;就可以了，結果見範例二。同樣的原理，我們也可以讓放大的效果變成往上放大，見範例三。不過我想最多人會希望置中放大，所以就見範例四。在範例四裡面，我是設定span的margin: -25px 0 -25px;，只有三個值的狀況下，依順序分別是top、left and right、bottom，事實上我也可以改成，margin: -25px 0;，這樣就變成top and bottom、left and right了。

如果第一個問題的處理方法了解的話，事實上第二個問題也是一樣的方法處理，我們直接拿範例四的置中放大來做修改，見範例五，在這裡我做了些改變，就是本來放大成100*100的方塊，我改成75*75了，這樣改的原因是如果放太大的話，會造成移到旁邊的方塊變的不容易，想像個極端的例子，你滑鼠移到的方塊如果大到蓋住旁邊的物件，不就選不到了嗎XD。講那麼多，都沒講到重點，在這個範例中我把margin改成左右都是-12.5px。

接下來要處理第三個問題了，中間的幾條線會比較粗的原因是因為左右物件都有左右框線，雖然設定是1px，但是兩條放在一起就變兩倍粗了。為了處理這個問題，我用了:last-child這個選擇器，然後除了最後一個物件以外，右邊的框線都設成0，結果就是範例六，事實上這個範例還不只修改框線的設定而已，因為用上:last-child這個選擇子，我必須要一物件把這四個span包起來，不然在:last-child的使用上會有困難（他會認為後面的p才是最後一個物件）。基於這點，我乾脆改成list，不過實際上用div標籤包一下就可以了。另外就是margin我改成了-13px，因為本來沒放大的物件少了一邊的框線，但是放大後又復原了，所以必須要增加margin的負值，把多出來的框線的空間補回來。就這樣，完成了這次的目標了，我想我沒漏掉什麼沒修改到才是。

最後附上一個突然想到的東西，本來是想用:nth-child()來做的，不過Firefox都還不支援，所以用了其他方法，也造成CSS比較難看，而且比較難擴充@_@。我是覺得這可能可以配合圖片玩些東西啦:P。