滑鼠正常,鍵盤焦點卻不見
把故障包另放student-work/fault-L06/portfolio,正常作品保留。這次只查主要連結的焦點,不重做卡片或配色。
1. 實際按鍵重現
- 開首頁,從頁面開頭使用Tab,觀察跳過內容、品牌、導覽,再走到主要連結;記下自己的實際順序,不照抄固定次數。
- 即使看不到輪廓,也確認當前元素是否真的是主要連結;可在開發者工具查看目前聚焦元素與其outline計算值。
- 開作品頁,再用Tab走到三個「了解合作服務」。滑鼠移入仍有亮紫回饋,鍵盤輪廓卻不見,是這次預期的故障。
- 先記錄實際路線、元素、outline與來源。不同瀏覽器的鍵盤設定可能不同,Tab不走連結時先確認設定或求助,不能直接當成CSS問題。
2. 請AI說明最小修正
在Cursor附故障三頁HTML、完整CSS、實際Tab/Shift+Tab路線與證據,再貼當關修正Prompt。先查同等選擇器較後的outline:none,不要只補hover或增加!important。
只處理造成故障的那個區塊。正常焦點已存在,修復不應改動APPA、圖片比例、卡片尺寸、連結目的地或其他樣式。
3. 修復後重新走一遍
- 一般狀態文字與入口都可見。
- 滑鼠hover仍為亮紫底白字。
- 用Tab及Shift+Tab,首頁深底白色輪廓、作品淺卡深紫輪廓都可見,寬3px、offset4px。
- 在實際聚焦的入口按Enter,目的頁正確;再返回繼續檢查其餘入口。
- 窄版沒有水平溢出,三頁圖片、文字與APPA完整。
強制顯示focus偽類或截圖只能輔助,不代替真正按鍵與導向。筆記寫下問題、來源、最小修正及實際重驗;未做的裝置或AI操作填待完成。