[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的原始碼結構如下：
<ul class="pane-list"> <li> <h3><a href="http://www.webdesignerwall.com">Web Designer Wall</a></h3> <p>A wall of design ideas, web trends, and tutorials</p> </li> <li> <h3>Best Web Gallery</h3> <p>Featuring the best <a href="http://bestwebgallery.com">CSS and Flash web sites</a></p> </li> <li> <h3>N.Design Studio</h3> <p><a href="http://www.ndesign-studio.com">Blog</a> and design portfolio of Nick La</p> </li> </ul>
而CSS的相關設定則為：
.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #ecfad7;
padding: 10px 20px 10px;
border-top: solid 1px #c4df9b;
cursor: pointer; //修改滑鼠游標
}
至於重頭戲jQuery的部份，原始碼如下：
$(document).ready(function(){
$(".pane-list li").hover(function(){
$(this).css("background-color", "#f6ffe9");
}, function(){
$(this).css("background-color", "#ecfad7");
});
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href");return false;
});
});
上面的動作，要處理的有兩件事情：
- 當滑鼠移過 li 區塊時會變化背景顏色：使用 .hover事件，修改 li 的background-color。
- 點擊整個 li 區塊即可以連結：使用 .click事件，並利用
$(this).find("a").attr("href");取得連結網址。
這篇jQuery Tutorials for Designers裡面的十大特效都非常簡單實用，一定能幫助有XHMTL和CSS基礎的網頁設計師做出互動性更強的網頁，快去看看吧。
