想在自己的網站中應用超酷的hover效果嗎？也許你可以從如下的這些執行個體中獲得一些靈感，如果你喜歡這些效果，也可以直接拷貝代碼并應用到你的站點。
hover效果能給網頁增加一些動态效果，并且使得站點更具有活力。原來的做法是使用javascript來實作這些動态效果，但是随着CSS3的引入和現代浏覽器的支援，我們可以用純粹的CSS代碼來實作這些有趣的效果。所謂的現代浏覽器，更多的是指以Mozilla和Webkit為核心的浏覽器，IE的表現稍微差強人意，是以請使用FireFox，Safari或者Chrome檢視一下的效果。如下就是要介紹的5個非常酷的純CSS hover 效果。
這種效果非常适合于當頁面上有一橫排圖檔的場景，當滑鼠hover時就産生波浪一樣的效果。
這個效果實作是非常簡單的，并且有多種方法實作，如下的核心實作方法是：初始給所有圖檔設定margin，當hover時，給相應的圖檔減少margin的值，這樣就實作了向上跳躍的效果。
這種效果不光可以應用于圖檔，一般的橫向排列的導航欄也可以應用這樣的效果。
效果中的透明效果是并不是必須的，不設定透明屬性并不影響hover時的跳躍效果，加上透明隻是為了讓效果更平滑。
CSS代碼：
<a target="_blank" href="http://www.dang-jian.com/Tools/HoverSamples/BumpUp.html">檢視Demo</a>
這種效果類似于熔岩燈效果，當滑鼠從上至下移動時，每個圖檔都是慢慢地放大然後恢複到原始的狀态。
為了實作這樣的效果，首先把原始圖檔顯示的時候縮小一點，當滑鼠hover時，放大圖檔的尺寸。
因為圖檔是居中顯示的，是以當滑鼠hover時，也增加了圖檔的margin，這樣使得當圖檔放大時也是居中的效果。
CSS代碼
<a target="_blank" href="http://www.dang-jian.com/Tools/HoverSamples/StackGrow.html">檢視Demo</a>
類似的這種效果，一般是用JavaScript來實作的，當hover其中某個元素時，另一個元素發生一些變化。本例為了實作這一效果，首先把圖檔和文字放在一個div裡，然後設定div的color：transparent和line-height:0px。當hover時，更改color和line-height屬性，使得文字顯示。
<a target="_blank" href="http://www.dang-jian.com/Tools/HoverSamples/FadeText.html">檢視Demo</a>
實作這個效果是非常容易的，但是因為這是一個非常重要的效果，尤其對于畫廊中的縮略圖。這個效果中我們使用了一些較新的CSS樣式。這個例子使用了box-shadows,transitions和transforms。transform是實作旋轉部分，transition是為了讓效果更平滑。
<a target="_blank" href="http://www.dang-jian.com/Tools/HoverSamples/CrookedPhoto.html">檢視Demo</a>
這個效果是相對複雜的效果，首先，設定減少圖檔的初始的透明度，當hover時，把透明度設定回預設值，另外會有一個圖檔邊緣發光的效果和倒影效果（隻在以Webkit為核心的浏覽器中起作用）。
<a target="_blank" href="http://www.dang-jian.com/Tools/HoverSamples/FadeReflect.html">檢視Demo</a>
經過測試，這些效果在以Webkit為核心的浏覽器上表現最出色，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，則需要其它的第三方JS庫。以上的這五個純CSS實作的hover效果，應該會給你帶來一些設計上的靈感，你可以綜合運用這些CSS樣式，并加入一些其他的CSS來産生一些有意思的效果。如果你也有一些非常酷的CSS效果，歡迎參與讨論。
以上的五種CSS Hover效果都應用了最新的CSS3效果，在現代的浏覽器中，應用這些CSS能展現出非常漂亮的效果。值得一提的是IE9，IE9不支援transition和transform這兩種效果，使得這五種效果在IE9下表現的不佳，寄希望于IE10吧。