[jQuery] 可連結的區塊元素
很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：
要完成這個效果，有兩個重點：
- 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
- 必須讓整個區塊可以連結。
在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。
而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。
和Smiley Cat一樣，Web Designer Wall也是採用 li 元素來排列這三個區塊，XHTML的原始碼結構如下：
而CSS的相關設定則為：
至於重頭戲jQuery的部份，原始碼如下：
上面的動作，要處理的有兩件事情：
- 當滑鼠移過 li 區塊時會變化背景顏色：使用 .hover事件，修改 li 的background-color。
- 點擊整個 li 區塊即可以連結：使用 .click事件，並利用
$(this).find("a").attr("href");取得連結網址。
這篇jQuery Tutorials for Designers裡面的十大特效都非常簡單實用，一定能幫助有XHMTL和CSS基礎的網頁設計師做出互動性更強的網頁，快去看看吧。
