本節的 HTML 範例套用了 3 種當滑鼠移入、移出按鈕時的 hover 效果。下圖共有 12 個按鈕, 我們會在同一列按鈕套用同一效果, 總共 3 種效果。

本章可以學到以下基礎內容。
˙ 將效果套用至 Web 網頁最重要的「按鈕」元素
˙ 針對多個元素 (例如範例中各按鈕), 個別套用同一效果
˙ 更進一步的 animate() 活用方法
在第 2 章中, 我們只針對單一元素 (字串「Creative jQuery」) 做處理, 在本章則要處理同一頁面的多個元素。範例的難度會越來越高, 請適時回頭複習前面的內容。

具有 hover 效果的按鈕

首先來看如何替按鈕加上 hover 效果, 總共有 12 個按鈕, 每列的效果都不同。

所有元素被 .page-main 類別包住, 並將包含各按鈕的子節點 id 設定為#buttons1, 現階段請先掌握這樣的結構。

.......﹝詳細內容﹞

 
更多內容請見 《 邁向 jQuery 達人的階梯 》

領帶專業品牌「giraffe」的商品介紹型錄。設計重點是使用了原尺寸大的各種領帶照片，這樣一來就可以在將傳單帶回家之後，放於胸前體驗穿戴後的感覺。和領帶花色一 起搭配的豐富的變化，也用容易理解的方式解說。

展示同系列六種商品
將同款的六種商品，整理成同一個系列來發表，讓人不禁想收集，這也是一種魅力。

.......﹝詳細內容﹞

..... 更多內容請見 《 好型錄 有銷路: 日本暢銷品牌型錄設計 》