Divi 圖片懸停特效教學：用 Image Hover 增加網站互動層次感
Divi Image Hover 是一套專為 Divi 主題設計的第三方模組外掛，在原生 Divi 編輯器裡新增一個「圖片懸停」模組，讓你完全不碰 CSS 就能在作品集、商品圖、團…
Divi Image Hover 是一套專為 Divi 主題設計的第三方模組外掛，在原生 Divi 編輯器裡新增一個「圖片懸停」模組，讓你完全不碰 CSS 就能在作品集、商品圖、團隊成員卡做出滑鼠移過即觸發的疊圖、放大、滑動、翻面等超過 30 種互動效果。Divi 內建的 hover 功能只能做顏色、陰影、邊距這類樣式切換，疊加第二張圖與進階動畫它做不到，這正是這類外掛存在的理由。
重點先看：真正決定 Image Hover 成敗的不是特效數量，而是「用在對的展示情境＋不拖垮 Core Web Vitals」；一支 hover 模組會多載入 1 張圖與額外 CSS/JS，特效堆越多、LCP 與 CLS 掉越多 [來源：web.dev〈Core Web Vitals〉〈https://web.dev/articles/vitals〉〈2026〉]。把這兩件事顧好，一支第三方模組可以讓靜態版型多一層引導點擊的互動價值；顧不好，整個頁面會被特效拖到行動版載入變慢、搜尋排名往後掉。
Divi Image Hover 是什麼？為什麼 Divi 主題需要這個外掛
Image Hover 是第三方開發者為 Divi 寫的擴充模組，掛進 Divi 編輯器後會在模組清單多出一個「Image Hover」項目，拖拉進欄位就能設定兩張圖與觸發動畫。它解決的缺口很明確：Divi 原生的 hover 選項只能做樣式切換，換顏色、換陰影、改邊距都沒問題，但你想讓滑鼠移過去時浮現一張第二角度的商品圖，或覆蓋一層半透明標題文字，內建功能就沒辦法，根據 Elegant Themes 官方的 Divi Hover Options 說明，內建選項僅涵蓋樣式屬性的切換。
換個角度想，Divi 本身已經是相當完整的頁面編輯器，從 Divi 主題完整教學指南 到 用 Divi 主題架站全攻略 涵蓋的版型都不少，但 hover 互動這塊它刻意留白，把進階動畫交給第三方。所以 必裝的 Divi 外掛清單 裡，互動類模組一直佔有固定位置。
為什麼 Divi 原生要留白？因為「疊第二張圖＋路徑動畫」這類效果背後牽涉 absolute 定位、z-index 堆疊、transition 緩動曲線這些與版型強耦合的邏輯，編輯器若要把全部控制項都做成 GUI，介面會變得極度複雜。原生 hover 只保留樣式屬性的切換，把變數最多的動畫邏輯交給模組市場去分工，這在大型頁面編輯器裡是常見的架構取捨。理解這一點，就不會把 Image Hover 當成「補 Divi 的缺陷」，而是一個專做 hover 的專職工具。
與之對照，Divi 自己的 Divi Supreme 模塊擴充評價 或 Divi 圖片輪播外掛推薦 雖然也帶互動，但屬於「套件打包」，hover 只是附屬功能；Image Hover Module 是專做 hover 的單一目的模組，效果選項更細、動畫曲線可控性更高。網站若已用 Divi Cloud 雲端版型 管版型，加這個模組也不會干擾既有架構。模組本身只負責 hover 互動，不碰全域排版、不覆寫主題樣式，移除時乾淨俐落。
外掛安裝流程：下載、授權與啟用
安裝流程跟一般 WordPress 外掛一樣：先取得 zip 檔，到後台「外掛 → 安裝外掛 → 上傳外掛」選檔上傳，啟用後模組就會出現在 Divi 編輯器。關鍵在於下載來源與授權處理，這兩步做錯後面全歪。
Image Hover Module 屬付費外掛，定價以官網公告為準。請務必從官方或授權經銷購買，來路不明的破解版常夾帶後門程式，WordPress 生態每年都有因為裝盜版外掛被植入惡意程式碼的案例。如果你還不熟悉 WordPress 外掛安裝流程，可以先看 WordPress 外掛安裝教學 建立基本觀念。
下載來源是整條流程風險最高的一環。盜版外掛的常見手法是「免費版本＋加碼功能」，實際上植入的程式碼可能把你的管理員帳號外傳、把網站變成寄信跳板，或在佈景裡塞 SEO 垃圾連結。判斷授權來源是否可信，可以看三個訊號：購買頁是否走官方金流（Stripe、PayPal 等可追蹤管道）、外掛是否有持續更新的 changelog、官方是否提供支援 ticket 系統。三項都缺，再便宜都不要碰。
- 到官方商店購買下載 zip 檔，避免破解版；若不確定來源，先用 WordPress 架站與 SEO 全攻略 裡的安全檢查清單過一遍。
- 進 WordPress 後台「外掛 → 安裝外掛 → 上傳外掛」，選 zip 上傳後點「啟用」。未啟用模組不會出現在編輯器，這是最常見的「裝了卻找不到」原因。
- 若外掛需要授權碼，到設定頁輸入以取得更新與支援；授權過期會影響日後升級。
- 先在測試頁面拉一個模組確認能正常渲染，再放到正式頁面，避免直接上線撞到相容性問題。
- 與 Divi 5 等新版本的相容性需看外掛更新日誌，升級前先備份網站。
我自己在幫客戶 Divi Marketplace 免費資源 與付費模組之間做選擇時，會看三件事：更新頻率、作者回應 issue 的速度、與當前 Divi 版本的相容紀錄。免費資源省錢但風險是作者可能停更，付費模組至少有合約保障更新。搭配 Divi 子主題推薦 一起用，可以把自訂樣式與外掛設定分層管理，升級時不會相互覆蓋。
授權過期是一個容易被忽略的長期成本。很多站長第一年買單後忘了續約，網站照常運作看起來沒事，但等到 Divi 大改版、外掛需要更新才能相容時，舊版本會直接報錯或白屏。建議在購買時就記下授權到期日，排進行事曆提醒，到期前一個月評估是否續約；即使不續約，也至少在到期前把可用的最後版本 zip 備份下來，當作回滾保險。
第一個 hover 互動效果的 5 個設定步驟
從零做出一個 hover 互動效果，核心流程是五個動作：進 Divi 編輯器 → 加 Image Hover 模組 → 上兩張圖 → 選特效 → 填文字與連結。不用碰任何 CSS，全部在視覺介面完成。五個動作逐一拆解如下。
- 進入 Divi 頁面：點齒輪進入 Visual Builder，在你要放圖的欄位按加號，搜尋「Image Hover」找模組。如果是第一次用 Divi 5 介面，可參考 Divi 5 新版介面與效能提升。
- 上傳兩張圖：一張是預設顯示圖，一張是 hover 觸發後出現的圖。兩張圖務必同尺寸，否則動畫切換時會抖動，這是排版跑掉最常見的原因。
- 挑特效：在 Effect 選項裡選你要的類型，例如 Overlay Push、Zoom In、Slide Right。建議先用 Overlay 試水，因為它最通用、容錯率最高。
- 填 hover 文字：輸入 hover 時要浮現的標題、副標、按鈕文字與點擊連結。文字要短，hover 區通常不會停留超過 1-2 秒，長文案會讓使用者來不及看完。
- 調動畫細節：動畫持續時間建議落在 300-500ms 之間，依循 Material Design 對互動動效持續時間的建議，並調陰影、圓角等細節，儲存後預覽。
這五步裡最容易翻車的是第二步與第五步。兩張圖尺寸不一致，輕則切換瞬間抖一下，重則整個 hover 容器在動畫過程中位移，造成 CLS 直接爆紅。實務做法是先在影像編輯器把兩張圖裁成完全相同的寬高比（例如 4:3 或 1:1），再分別匯出成 WebP 上傳；不要仰賴 Divi 在介面上「鎖定比例」的設定，因為某些特效在動畫過程會暫時解除比例鎖定。第五步的動畫時間則要避免兩個極端：低於 200ms 使用者根本察覺不到等於沒做，超過 600ms 會讓人覺得網站卡頓，落在 300-500ms 之間是最順手的感知區間。
| 設定項目 | 建議值 | 理由 |
|---|---|---|
| 動畫持續時間 | 300-500ms | 太快使用者察覺不到，太慢拖滑順度 |
| 兩張圖尺寸 | 完全一致 | 避免切換時位移與 CLS |
| 圖片寬度 | ≤顯示尺寸 2 倍 | 兼顧 Retina 清晰度與檔案大小 |
| 圖片格式 | WebP | 比 JPEG 小 25-35%，LCP 更快 [來源：web.dev〈Fast load times〉〈https://web.dev/articles/fast〉〈2026〉] |
| hover 文字長度 | ≤15 字 | 停留時間短，長文讀不完 |
| 緩動曲線 | ease-out 為主 | 進場快收尾慢，視覺收得乾淨 |
一個實際場景：你做 Divi 作品集設計教學 時，每個作品縮圖用 Image Hover，預設顯示專案封面，hover 後覆蓋一層半透明黑加專案名稱與「查看案例」按鈕。這比硬塞文字在縮圖下方清爽，版面也更俐落。若想做更複雜的 Divi 佈局版型推薦 或 Divi 高質感版型庫，hover 模組是讓靜態版型「活起來」的關鍵零件。
設定過程還有一個小習慣能省下日後維護成本：在每個 Image Hover 模組的「Admin Label」欄位標註用途，例如「首頁作品集-hover-overlay」、「商品主圖-hover-zoom」。頁面一多、特效一雜，Visual Builder 的模組清單會變得很難找，有了 admin label 就能快速定位要改哪一個。這個習慣跟 Divi Cloud 雲端版型 的版型命名是同一套邏輯，命名清楚，團隊協作才不會各自猜測。
特效分類與挑選建議
Image Hover 的特效官方列出的選項數量超過 30 種，大致分成五大類：Overlay 疊圖、Zoom 縮放、Slide 滑動、Flip 翻轉、Push 推移。挑選原則只有一條，特效要幫使用者獲得資訊，而不是純炫技。
| 特效類型 | 觸發後行為 | 最適合情境 | 不適合 |
|---|---|---|---|
| Overlay 疊圖 | 覆蓋半透明色層與文字 | 作品集、案例展示 | 需要看清原圖細節 |
| Zoom 縮放 | 圖片放大 1.1-1.3 倍 | 商品主圖、細節展示 | 文字密集區 |
| Slide 滑動 | 第二張圖從側邊滑入 | 前後對比、第二角度 | 窄欄位 |
| Flip 翻轉 | 3D 翻面露出背面 | 團隊成員卡、雙面資訊 | 純展示縮圖 |
| Push 推移 | 原圖被推開、新圖滑入 | 輪播替代、分步展示 | 資訊連續性重要時 |
新手最容易踩的坑是裝完 Image Hover 就想把每種特效都試一遍。全站 hover 特效不建議超過 2-3 種，理由有兩個：一是視覺一致性，同一個網站出現四五種動畫風格會顯得雜亂；二是載入負擔，每種特效背後是不同的 CSS 與動畫函式，種類越多打包的資源越大。
挑選時可以這樣想：作品集用 Overlay，因為 hover 出現的標題能引導點擊；商品主圖用 Zoom，讓消費者不點進去也能看清材質；團隊卡用 Flip，正面照片翻到背面露出 Monarch 社群分享按鈕 與聯絡資訊。其他像是 Divi 價目表設計技巧 或 Divi 標題樣式設計 這類以資訊閱讀為主的區塊，盡量別加 hover，會干擾閱讀節奏。
挑特效還要考慮一個變數：特效與背景色的搭配。Overlay 疊圖的半透明色層如果用的是品牌深色，hover 文字就必須用淺色才看得清，這個對比要在設計階段就定好，等到頁面上線才發現文字糊在一起就來不及。Zoom 縮放則要預留放大後的裁切空間，否則放大 1.3 倍時圖片邊緣會被欄位切掉，反而像出錯。這些細節都是選定特效後要回頭調版型容器的，不是特效一開就萬事太平。
進階技巧：動畫曲線、疊圖層與自訂 CSS 細調
把 Image Hover 用到進階，重點會從「選哪種特效」轉到「微調動畫質感」。同樣是 Overlay，用 linear（線性）緩動與用 ease-out 緩動，視覺感受天差地別。線性動畫從頭到尾等速，看起來機械生硬；ease-out 開始快、結束慢，符合人眼對「物體減速停下」的自然預期，幾乎所有 hover 互動都建議用這個曲線當預設。再進階一點，可以試 cubic-bezier 自訂曲線，做出帶一點回彈感的效果，這類曲線在商品展示、品牌頁能提升質感，但在資訊密度高的列表頁反而會顯得累贅。
疊圖層的設計有一個常見誤區：把 hover 文字直接放在 Overlay 色層上，卻忘了處理文字的對比與留白。結果是色層透明度調低、原圖看得見，但文字糊在背景裡讀不出來；調高又把原圖整個遮住，等於 hover 後只看到一塊色塊。正確做法是把色層與文字分成兩個圖層，色層透明度（建議落在 0.4-0.7）顧原圖、文字層獨立控制不透明度與字重，必要時在文字背後再加一層更窄的深色背板。這個手法在 Divi 作品集設計教學 與 Divi 頁首套版設計 的卡片應用都適用；多卡片並排時，動畫方向（全部由下往上、或全部由左往右）保持一致，視覺才不會打架。
自訂 CSS 的進階玩家可以進一步把 hover 動畫交給 transform 而非 margin 或 top/left。transform 由 GPU 合成，不會觸發版面重排，hover 互動的流暢度明顯勝過改位置屬性的寫法。判斷方法很簡單：打開瀏覽器開發者工具的 Performance 面板，錄一段 hover 過程，如果看到大量 Layout 與 Paint 事件，就代表你的 CSS 寫法拖累了主執行緒，改用 transform 與 opacity 兩個屬性就能解掉大部分問題。這個觀念跟 CSS Box Model 排版觀念 強調的「少觸發 reflow」是同一條路。
手機看不到 hover 效果的原因與替代做法
手機開啟網站後把手指移過圖片沒反應，不是 bug，是行動裝置根本沒有滑鼠 hover 事件。瀏覽器在觸控裝置上不會觸發 mouseover，最多在第一次點擊時短暫觸發，這是網頁標準而非外掛缺陷，MDN 對 :hover 偽類與觸控行為的說明也指出觸控裝置對 hover 的支援相當有限。所以任何只靠 hover 才能顯示的價格、按鈕、聯絡資訊，在行動版上等於直接消失。
這條規則再強調一次：關鍵資訊永遠不能藏在 hover 裡。一個常見的錯誤是把商品頁「加入購物車」按鈕做成 hover 才出現，桌面轉換率看似不錯，但行動版佔了七成流量，按鈕完全看不到，整體轉換比同業低一截；改成常駐顯示後，行動版轉換率往往當週就回升。這跟 響應式網頁設計 RWD 與 RWD 響應式設計實戰 強調的行動優先是同一件事。畢竟 2026 年第一季，行動裝置（不含平板）占了全球網站流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]，超過一半的訪客根本看不到 hover 內容，把關鍵資訊藏在 hover 裡等於對這一半流量視而不見。若要做的是 WooCommerce 商品頁 SEO 優化，這點更敏感，因為 Google 檢索與排名都偏向行動版內容。
行動版的替代做法要分清楚「資訊」與「互動」兩件事。資訊（價格、規格、按鈕）必須常駐顯示，不能依賴任何手勢；互動（切換角度、展開細節）可以改用行動友善的手勢，例如點擊切換第二張圖、左右滑動看更多角度。Divi 本身可以在模組設定裡針對手機、平板、桌面分別啟用或關閉，做法是在手機視窗把 Image Hover 模組關掉，改用一個常駐顯示的圖片模組搭配輪播；或直接在窄螢幕用點擊展開的互動元件取代 hover。測試時不要只靠瀏覽器的行動模擬，最好拿實機走一輪，因為模擬器對 touch 事件的行為與真實裝置仍有差異。
效能影響：hover 模組會拖慢網站嗎
會，而且幅度取決於你用了幾個模組與圖片多大。Image Hover 模組本身會載入額外的 CSS 與 JS，加上每個模組多一張 hover 圖，特效用得越多、圖片越大，對 LCP（最大內容繪製）與 CLS（累計版面位移）的拖累越明顯。Core Web Vitals 的合格門檻是 LCP ≤2.5 秒、CLS ≤0.1、INP ≤200ms [來源：web.dev〈Core Web Vitals〉〈https://web.dev/articles/vitals〉〈2026〉]，hover 模組堆太多會直接吃掉這些額度。
而且 LCP 拖慢的不只是分數，是實實在在的營收。Vodafone 的案例顯示，LCP 改善 31% 就讓銷售額增加 8% [來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]，換句話說，hover 模組多載的那張圖若把 LCP 往後推，吃掉的就是這類可量化的轉換。同一份研究也記錄了 redBus 改善 INP（Interaction to Next Paint）後銷售額提升 7% [來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]，而 INP 正是 hover 動畫最容易拖累的指標，動畫函式過多會卡住主執行緒，使用者點擊到下一次畫面更新之間的延遲就會變長。這也是為什麼 hover 特效要克制著用，能加就加只會把轉換率一起吃掉。
| Core Web Vitals 指標 | 合格門檻 | hover 常見拖累來源 |
|---|---|---|
| LCP | ≤2.5 秒 | 首屏 hover 圖未壓縮、未延遲載入 |
| CLS | ≤0.1 | 兩張圖尺寸不一致導致位移 |
| INP | ≤200ms | 動畫函式過多、JS 阻塞主執行緒 |
圖片優化是回報最快的動作。把 hover 圖從 JPEG 轉成 WebP，檔案通常能縮小四分之一到三分之一 [來源：web.dev〈Fast load times〉〈https://web.dev/articles/fast〉〈2026〉]，再為非首屏模組啟用 Lazy Loading（相關做法見 Lazy Loading 延遲載入教學），搭配 WordPress 圖片優化完整指南 與 圖片 SEO 優化指南 一套做下來，LCP 多半能省下數百毫秒。進一步的快取與 CDN 加速，可參考 WP Rocket 快取外掛設定 與 CDN 網站加速原理；速度這件事還牽動 SEO 排名，Core Web Vitals 優化攻略 把圖片與動畫資源列為首要處理項目。定期用 PageSpeed Insights 檢測，當 CLS 或 LCP 轉紅時優先檢視 hover 模組數量。
效能優化的優先順序有一個簡單的判斷框架：先處理首屏、再處理互動、最後才追求動畫質感。首屏的 hover 圖若出現在 LCP 元素附近，這張圖必須優先壓縮且不能延遲載入；互動層面要看 INP 是否因動畫函式過多而卡頓；動畫質感（緩動曲線、回彈效果）則是前面兩項都過關後才值得花時間微調。順序顛倒的人常會花一個下午調出完美的回彈曲線，結果 PageSpeed 還是紅字，因為真正拖慢頁面的是那張沒壓縮的首屏圖。
以這類用 Divi 架設、首頁塞滿作品或商品縮圖的展示型網站為例，常見的狀況是站長一開始每個縮圖都套 Image Hover，首頁一次載入十幾個模組，每個模組又多一張未壓縮的 hover 圖。依這類站的典型表現幅度，PageSpeed Insights 的 LCP 大約會落在 3.5-4.8 秒之間，CLS 也常因為兩張圖尺寸對不齊而衝到 0.15-0.25，兩項同時落在紅色區間。把首屏的 hover 模組數量壓到 2-3 個、其餘縮圖改回靜態排版，再把保留的 hover 圖統一轉成 WebP、寬度收在顯示尺寸的 2 倍以內，通常 LCP 能回到 2.3-2.8 秒、CLS 回到 0.05 以下，這個幅度對照前面 web.dev 引用的 Vodafone 案例（LCP 改善 31% 帶來 8% 銷售成長）是相當一致的趨勢。
這個幅度要誠實說明一個限制：上面 LCP 與 CLS 的區間是建立在「主機回應速度中等、未上 CDN」這類常見的入門配置上。如果你的站已經用 WP Rocket 快取外掛設定 搭配 CDN 網站加速原理 做過第一層優化，原始 LCP 可能本來就在 2.5 秒邊緣，這時把 hover 模組從十幾個砍到 3 個，改善幅度會縮小到 300-500ms 左右，回報不像從 4 秒降回 2.5 秒那麼戲劇化。決策角度因此很清楚：先量基準線再決定要不要動 hover，用 PageSpeed Insights 跑一次現況，若 LCP 已經在 3 秒以上，砍 hover 模組數量會是回報最快的單一動作；若 LCP 本來就在 2.5 秒以內，把力氣轉去壓縮圖片與啟用延遲載入更划算。說到底，hover 特效是可以用的，前提是挑對地方用。把 hover 限制在高價值的 1-2 個展示點，其他地方用靜態排版，效能影響就能壓在可接受範圍。這比「裝一堆特效然後再用快取硬扛」務實得多。
適合用在哪：作品集、商品與團隊頁
Image Hover 最能發揮價值的是「需要二次資訊」的展示型區塊，也就是滑鼠移過去時浮現的內容，比點進另一頁更快獲得。反之，首頁 Hero、文章內文圖、純資訊列表不適合，會讓使用者分心或拖慢載入。
- 作品集：hover 顯示專案名稱、類別、查看連結，點擊進入案例頁。可結合 作品集網站設計指南、作品集範本模板 與 作品集網站製作教學 規劃整體架構。
- 商品頁：hover 切換第二張商品圖，讓消費者不用點進去就能看其他角度，這對 Divi 打造 3C 購物網站 尤其實用。
- 團隊介紹：hover 翻面顯示成員的 LinkedIn、Email 等聯絡方式，適合放在 Divi 頁首套版設計 的關於我們區。
- 服務列表：hover 顯示服務詳細說明，節省版面又保留資訊。
不建議用於 Hero 主視覺、文章內嵌圖、純文字說明區。Hero 區使用者停留時間極短，hover 來不及觸發就被捲走；文章內文圖加 hover 會干擾閱讀，讀者要的是資訊不是動畫。若你做的是 用 Divi 打造品牌形象網站 或 用 Divi 打造美妝部落格，hover 留給作品與商品就好，內文維持靜態。
一個常被問到的延伸：hover 能不能套用在整個圖庫或輪播？答案是可以但要小心。把 hover 模組塞進 Divi 圖片輪播幻燈秀工具 或 Divi 分類篩選外掛教學 的版型裡，會同時載入輪播與 hover 兩套資源，效能疊加後很容易把 LCP 推過紅線。做法是二選一：要輪播的流暢，還是要 hover 的二次資訊，兩者通常不該同時出現在同一個區塊。如果你需要的是更整體的視覺動態，Divi 視差滾動立體效果 會是比滿頁 hover 更好的選擇。
選擇 hover 或不做 hover，本質是設計判斷問題。這跟 UI 原型設計與互動規劃、網頁設計必備關鍵元素、網頁版面設計攻略、CSS Box Model 排版觀念 處理的是同一件事：互動要服務資訊傳遞，不是反向。最新 最新網頁設計趨勢 也顯示，過度裝飾的特效正在退潮，精準克制反而顯得高級。
什麼情況不該用 Image Hover：決策矩陣
並不是所有圖片區塊都該加 hover，有時不加反而更好。決策的關鍵在於兩個維度：這個區塊的資訊是否「需要二次揭露」，以及使用者的「停留意圖」是瀏覽還是閱讀。把這兩個維度畫成矩陣，就能快速判斷要不要上 hover。
| 情境 | 需要二次資訊 | 使用者意圖 | 該不該用 hover |
|---|---|---|---|
| 作品集縮圖 | 是（專案名、類別） | 瀏覽挑選 | 適合，Overlay 引導點擊 |
| 商品主圖 | 是（第二角度） | 比較細節 | 適合，Zoom 看清材質 |
| 團隊成員卡 | 是（聯絡方式） | 偶爾查詢 | 適合，Flip 露出背面 |
| 首頁 Hero 主視覺 | 否 | 快速掃視 | 不適合，來不及觸發 |
| 文章內文圖 | 否 | 閱讀 | 不適合，干擾閱讀 |
| 價格對照表 | 否 | 比較閱讀 | 不適合，資訊要常駐 |
| 新聞列表縮圖 | 視情況 | 快速掃標題 | 謹慎使用，標題要常駐 |
從這個矩陣可以歸納出一條判斷原則：當「二次資訊」是錦上添花（沒看到也不影響理解），hover 才是加分；當「二次資訊」是理解頁面所必需，就絕對不能用 hover，必須常駐顯示。商品價格是必需資訊，藏在 hover 裡等於對一半的行動流量隱形；但「查看更多照片」的提示是錦上添花，做成 hover 按鈕無傷大雅。同理，使用者在閱讀狀態（文章內文、長說明）時不宜加 hover，避免打斷閱讀；在瀏覽狀態（作品集、商品列表）時 hover 反而能增加引導力道。至於首屏且為 LCP 元素的區塊，則優先壓縮靜態圖、避免 hover 拖累載入。
無障礙與 SEO：hover 內容對搜尋引擎與輔助技術的影響
hover 內容牽涉兩個常被忽略的面向：搜尋引擎看得到嗎、輔助技術讀得到嗎。這兩個問題的答案，直接決定你的 hover 設計會不會變成「只有滑鼠使用者享受得到」的孤島。
搜尋引擎方面，Google 的檢索器會執行 JavaScript 並渲染頁面，但 hover 觸發的內容通常是在 :hover 偽類下才顯示，檢取器沒有「移動滑鼠」這個動作，等同於看到的是未觸發的預設狀態。這代表只靠 hover 才出現的關鍵文字（例如只在 hover 顯示的商品規格、服務說明），搜尋引擎很可能抓不到，等於這些文字對 SEO 沒有貢獻。正確做法是把這些文字同時寫進頁面的常駐內容（例如卡片的 alt、鄰近的說明段落、結構化資料），讓 hover 只是「視覺上的強調」，而不是「唯一的揭露管道」。這跟 圖片 SEO 優化指南 與 WooCommerce 商品頁 SEO 優化 強調的「關鍵資訊要被檢取器看見」是同一件事。
無障礙方面，鍵盤使用者與螢幕閱讀器使用者往往無法觸發 hover。只依賴滑鼠移過才顯示的內容，對這群訪客等於不存在。改善做法有兩層：第一，讓 hover 內容也能用鍵盤 focus 觸發（:hover 與 :focus 同時套用），這樣 Tab 鍵走到的元素也能顯示；第二，確保 hover 文字有正確的語意標籤（標題用 h3、按鈕用 button），螢幕閱讀器才能正確朗讀。若 hover 內容是純裝飾（例如只是把圖變亮），可以加上 aria-hidden；若是資訊性的，就要確保它在 DOM 裡有對應的可讀節點。這些細節在 網頁設計必備關鍵元素 與 響應式網頁設計 RWD 的脈絡下都是基本工，到了 hover 互動只是同樣原則的延伸。上線前用鍵盤與螢幕閱讀器各走一遍，確認非滑鼠使用者也能取得資訊。
Image Hover 與其他 Divi 互動方案的比較
挑互動方案時，很多人會在「Image Hover 模組」「Divi 原生 hover」「Divi Supreme 等套件」「純手寫 CSS」之間猶豫。這幾個方案的定位、成本與可控性都不一樣，適合的人也不同。四條路線擺在一起比較，方便依照自己的技術能力與維護需求挑選。
| 方案 | 上手指入難度 | 特效可控性 | 維護成本 | 適合誰 |
|---|---|---|---|---|
| Image Hover Module | 低，拖拉即用 | 中高，選項細 | 中，依賴外掛更新 | 不想碰 CSS 的站長 |
| Divi 原生 hover | 低，內建 | 低，只有樣式切換 | 低，隨主題更新 | 只需顏色陰影變化的人 |
| Divi Supreme 等套件 | 低中，打包多功能 | 中，hover 是附屬 | 中高，套件體積大 | 一次要很多模組的人 |
| 純手寫 CSS | 高，要會 transform | 高，完全可控 | 高，自己維護 | 有前端能力的開發者 |
從這張表可以看出，Image Hover Module 的甜點區是「不想碰 CSS、又要比原生更豐富的特效」。如果你的需求只是讓按鈕在 hover 時變色，原生功能就夠，多裝一支外掛反而增加維護負擔；如果你已經會寫 transform 與 keyframes，純手寫 CSS 可以做出完全貼合設計稿的動畫，連外掛授權費都省下來。Image Hover 的價值在於把「中等複雜度」的 hover 互動門檻降到零，讓設計師與內容編輯也能做出有質感的互動，而不必每一個特效都回頭找工程師。這跟 必裝的 Divi 外掛清單 把互動類模組列為「設計師友善工具」的定位一致。
跨主題的比較也值得一看。如果你還在評估平台，WordPress 頁面編輯器比較 與 Elementor 陣營的 Elementor 圖片輪播教學、Elementor 外掛推薦、Elementor 作品集展示、Elementor 滿版輪播 Hero 都有各自的互動方案。選擇邏輯相同：先看你的互動需求多複雜，再看主題生態有沒有對應工具，最後才考慮特效好不好看。順序反了，往往會為了一個炫特效而綁死整個技術選型。
Divi Image Hover 常見問題與故障排除
裝了 Image Hover 後最常見的三類問題：效果不觸發、排版跑掉、整頁白屏。三類問題的排查方向不同，分清楚才不會白忙。以下是對照表與逐項處理建議。
| 問題類型 | 典型原因 | 第一步排查 |
|---|---|---|
| 效果不觸發 | 外掛未啟用、被其他 JS 覆蓋、快取未清 | 確認啟用狀態、清除快取、檢查主控台錯誤 |
| 排版跑掉 | 兩張圖尺寸不一致 | 統一兩張圖尺寸或設固定比例 |
| 白屏或衝突 | 與其他外掛 JS 衝突、Divi 版本不相容 | 停用其他外掛逐一交叉測試 |
| 授權失效 | 授權過期無法更新 | 到設定頁確認授權狀態並續約 |
| 行動版無反應 | 觸控裝置無 mouseover | 改用點擊或常駐顯示替代 |
除錯有一個系統化的順序，能避免亂槍打鳥。先開瀏覽器無痕視窗看頁面，排除快取與擴充功能干擾；接著開開發者工具的 Console 看有沒有紅字錯誤，紅字通常會直接點名是哪個外掛的 JS 出問題；然後用「二分法」停用其他外掛，一次停一半，看問題消失與否，快速縮小嫌疑範圍；最後若問題仍在，切回預設佈景測試，排除是主題層級的衝突。這套流程對任何 WordPress 外掛衝突都通用，不只在 Image Hover 有效，相關的整體除錯觀念可併入 WordPress 架站與 SEO 全攻略 的維護章節一起建立。其中最常見的元兇是另一個載入 jQuery 不同版本的外掛，以及未清除 網站快取 造成的舊資源殘留。
大多數「裝了就壞掉」的案例，根因都不是外掛本身有問題，而是網站本身就裝了太多外掛互相打架。WordPress 生態裡外掛數量動輒破百的網站，任何一個新外掛都可能踩到既有的 JS 衝突。在動手除錯前，先盤點總共裝了多少外掛、砍掉沒在用的，很多時候問題會自己消失。Hover 模組是這樣，整個網站的工具選擇也是同樣道理；授權過期與 Divi 版本不相容則是另一類常見根因，升級前先備份、遇到不相容就回滾到前一版本，必要時聯繫作者支援。
Image Hover 之於 Divi，跟 CTA 行動呼籲按鈕設計、Landing Page 轉換率優化 之於整體轉換流程，定位接近：放大既有內容的價值，而非取代內容本身。如果你還在用 WordPress 頁面編輯器比較 階段，或考慮 Elementor 圖片輪播教學、Elementor 外掛推薦、Elementor 作品集展示、Elementor 滿版輪播 Hero 這類替代方案，互動特效只是選擇因素之一，別為了 hover 反向決定主題。商用免費圖庫網站 拿來的圖也記得先壓縮再上傳，圖太大時再好的特效也救不回 LCP。
Image Hover 上線前檢查清單
把 hover 互動推上正式環境前，照著這份清單走一遍，能擋掉大部分上線後才發現的問題。清單分成四組：基本設定、效能、行動版、無障礙。每一項都對應前面章節講過的原則，這裡把它濃縮成可逐項打勾的形式。
- 基本設定：兩張圖尺寸完全一致、動畫時間落在 300-500ms、緩動曲線以 ease-out 為主、hover 文字 ≤15 字。
- 基本設定：每個模組都設了 admin label，方便日後維護定位。
- 效能：hover 圖轉成 WebP、寬度不超過顯示尺寸 2 倍、非首屏模組啟用延遲載入。
- 效能：全站 hover 特效種類 ≤3 種、首屏未堆疊過多模組、PageSpeed 的 LCP 與 CLS 在綠色範圍。
- 行動版：關鍵資訊（價格、CTA、規格）在窄螢幕常駐顯示、實機測過手勢替代互動。
- 行動版：窄螢幕已關閉會拖累載入的 hover 模組，改用靜態或點擊展開。
- 無障礙：hover 內容也綁 :focus、關鍵文字同時寫進常駐內容讓搜尋引擎抓得到、純裝飾加 aria-hidden。
- 無障礙：用鍵盤 Tab 與螢幕閱讀器各走一遍，確認非滑鼠使用者能取得資訊。
這份清單不是越多越好，重點是「每一項都檢查過」。很多人會跳過無障礙與行動版兩組，理由是「我的客群都是桌面使用者」，但這個假設在行動流量過半的時代站不住腳，也會讓你在搜尋排名上吃虧。把清單當成上線前的最低門檻，每次新增或修改 hover 模組都重跑一輪，互動品質才能長期穩定。
Divi Image Hover 常見問題 FAQ
Divi Image Hover 跟 Divi 內建 hover 差在哪？
內建 hover 只能切換樣式屬性如顏色、陰影、邊距，無法疊加第二張圖或做路徑動畫。Image Hover Module 補上疊圖、Zoom、Slide、Flip 等進階互動，兩者用途不重疊。
Divi Image Hover Module 外掛要錢嗎？哪裡下載？
屬付費外掛，定價以官方商店為準，請從官方或授權來源購買 zip 檔。不要用破解版，常夾帶後門程式。
為什麼手機上看不到 Divi hover 效果？
觸控裝置沒有滑鼠 mouseover 事件，hover 多數不觸發或變成點一下才短暫顯示。關鍵資訊如價格、按鈕不能只靠 hover 呈現，行動版要常駐顯示。
Divi hover 效果會拖慢網站速度嗎？
會，每個模組多載一張圖與額外 CSS/JS，數量越多對 LCP 與 CLS 拖累越大。控制模組數量、圖片轉 WebP、啟用延遲載入與快取外掛，可把影響壓到可接受範圍。
Divi 作品集適合用哪種 hover 效果？
Overlay 疊圖最適合，hover 時覆蓋半透明色層與專案標題、查看連結，版面乾淨又能引導點擊。商品主圖適合 Zoom，團隊卡適合 Flip。
Divi hover 內容搜尋引擎看得到嗎？對 SEO 有影響嗎？
只靠 :hover 才顯示的內容，檢取器沒有移動滑鼠的動作，很可能抓不到。關鍵文字要同時寫進常駐內容（alt、說明段落、結構化資料），讓 hover 只是視覺強化，而非唯一揭露管道，這樣才不會在 SEO 上吃虧。