雖然與網頁互動的過程會花費更多的時間，但它卻是吸引人很重要的一項因素，因此在設計部落格版面的時候，有很多人喜歡加入一些互動式的訊息，在設計CSS時，最常用到的屬性就 hover，讓我覺得非常好用且很容易上手，簡單來說，hover是在控制當滑鼠移至某元件時，某元件該如何反應，以下將介紹CSS中有用到hover屬性的地方~

hover + a 超連結應用

這是 hover 常被使用的地方，當滑鼠移至超連結時，不論是文字變色、位移、換背景都是利用 hover 達到。
以下的CSS程式碼範例是滑鼠移至網誌標題時，網誌標題顏色變成桃紅色並且往右下位移

#banner h1 a:hover{
color: #fc3a63;
position: relative;
top: 1px;
left: 1px;
}

hover + background 背景變化

• 讓滑鼠所在的區域與其他區域有所區隔，比較容易找到滑鼠位置，

.article-head{
background: #ccc;  /* 原本的背景顏色 */
}
.article:hover .article-head{
background: #aaa;  /* 當滑鼠經過時，背景顏色改變 */
}

採用.article:hover/.article-head 而不是.article-head:hover的原因是希望滑鼠移至該文章任何區塊，背景都能有變化，若只定義在.article-head:hover的話，滑鼠移至文章標題那個灰色區塊背景才會變化，若移至圖片就不會變化

• 除了背影顏色外，背景圖案也可以變化，以下範例是將連結文字前方加一個小圖，滑鼠經過時小圖會變換

.title h2{
background: url(灰色愛心的icon) top left no-repeat;  /* 滑鼠未移至文章時的icon */
padding-left: 14px;  /* 每篇文章標題前都有一個小圖，利用padding讓文字往後移，不要遮住圖 */
}
.article:hover .title h2{
background: url(紅色愛心的icon) top left no-repeat;  /* 滑鼠移至文章時的icon */
}

hover + display 顯示

• 滑鼠移至某區塊時，出現原本沒有的文字或圖片提醒讀者

.more a{  /* 因為繼續閱讀是個超連結，要用a來定義 */
display: none;  /* 平常設定不要顯示 */
}
.article:hover .more a{
display: block;  /* 當滑鼠移至該篇文章時，設定以block顯示，可設定超連結以一個區塊顯示 */
width: 150px;  /* 設定長與寬 */
height: 150px;
background: url(image url) center center no-repeat;  /* 設定背景 */
position: absolute;  /* 將繼續閱讀的位置放置於文章左上角，top=0, left=0 */
top: 0px;
left: 0px;
font-size: 0px;  /* 不要文字出現，因為設定背景來顯示 */
}

• 下拉式選單

#links-row-2 .box-text{
display: none;  /* 平常設定不要顯示 */
}
#links-row-2 .box:hover .box-text{
display: block;  /* 當滑鼠移至該元件時，才會顯示 */
}

要注意不可以寫成 #links-row-2 .box-title:hover .box-text ，CSS的寫法要考慮到層級問題，因為 box-text 是包含在 box 裡面，但不是包含在 box-title 裡面。