元素交互性——<code>:hover</code>、<code>:active</code>與<code>cursor</code>

想將你的廣告掛在此處？點擊查看詳情！

實時可動時鐘！

非官方期刊《唱唱反調》現火熱發行中！

感謝您使用MoeSkinPlus CSS，在Vector皮膚與MoeSkin中找到平衡！

模仿GOC的一個組織。有興趣看看嗎？

改良組織信息模板，消滅T:組織信息暴政，世界屬於infobox Organization！

懸賞，做任務，來懸賞板做發布懸賞，或者做個賞金獵人吧！

注意！你現在使用的是手機版視圖，推薦使用電腦查看，請確保你有指針。

前言

如題，主要介紹:hover、:active與cursor對交互性的影響與萌百內運用。（？

由於我也不太會所以不會講的很深，但需要一定HTML、CSS基礎。

本文用到的例子主要使用了{{Hovers}}和U:鬼影233/actives進行演示。

主要是寫了一些自己的一點心得，寫的不好或需要改進請在評論區或討論頁留言。

簡介

:hover和:active的區別

• :hover是指滑鼠移至元素上時發生的效果，移出時恢復。
• :active則是指滑鼠按住元素上時發生的效果，鬆開時恢復。

cursor

• cursor可更改滑鼠移至元素上時指針的樣式，移出時恢復。手機端：當然沒有指針，部分設備會出現類似:active的效果，表現為短暫半透明藍覆蓋，如與需要效果衝突請使用mobileonly與nomobileclass分開寫

大多數情況以上3個都可以混用。

例子

普通

:hover

:active

cursor

代碼

• HTML：

<div style="display:inline-block; font-size:18px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;">普通</div>

<div class="hovers-fade" style="display:inline-block; font-size:18px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;">:hover</div>

<div class="actives-fade" style="display:inline-block; font-size:18px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;">:active</div>

<div style="cursor:pointer;display:inline-block; font-size:18px; margin:5px; padding:10px; background:#eee; border:3px #ccc solid; text-align:center; color:#666; font-weight:bold;">cursor</div>

• CSS：

.hovers-fade, .actives-fade {
  opacity: 1;
}
.hovers-fade:hover, .actives-fade:active {
  opacity: 0.5;
}

交互性

元素

首先這是一個普通元素，你一般不會去點它。

那麼就需要:hover了

這是加了:hover的；

是不是還是感覺不太會點下去？那麼就要再加cursor:pointer;

這是加了:hover與cursor:pointer;的：

現在你會想點下去了，但...點下去了怎麼能沒有反應，所以再加上:active

這是加了:hover、cursor:pointer;和:active的：

那麼然後就可以再加億點點裝飾，例如邊框、陰影和圓角、下劃線甚至常態動畫等等。但在手機端，:hover與:active都需要點擊上才會顯示，那就需要其他的引導。

如果頁面的連結（文字）顏色被更改或頁面具有清晰的主題強調色，此處元素顏色也建議選取相似的顏色。

文字

這是一段你不會想點的文字。

那麼像之前一樣？

還差一點。文字本身就不夠凸顯，所以最好改變文字的顏色或文字背景顏色，當然也可以使用加粗或斜體或混用來表示。

(ｉ)注意 這裡我改了假鏈的樣式，請自行查看默認樣式。

最簡單的是使用{{假鏈}}最簡單的是使用{{假鏈}}

{{假鏈}}自帶cursor:pointer和一點:hover與:active{{假鏈}}自帶cursor:pointer和一點:hover與:active

大多的連結顏色都是#0645AD（電腦版視圖-內鏈）#3366bb（電腦版視圖-外鏈）、#3366CC（手機版視圖）

那麼然後也可以再加億點點裝飾，例如邊框、陰影、斜體/粗體等等，但不建議幾個連結不同樣式，特別是在同一段落內。

錯誤案例

人物使用浮動

大多人物不應當使用bob、hang等浮動，除非是帶有翅膀、天使等角色（但也不建議，除非角色和背景分層），不然會反直覺

（絕贊更新中...（咕咕咕））

結語

沒錯，這就結束了。

具體用法與代碼寫法請參見：

• {{Hover}}
• {{Hovers}}
• U:鬼影233/actives

其它：

實例運用：

• U:鬼影233/井字棋（開發中...）
• {{Link-box}}
• {{假鏈}}
• {{按鈕}}

---

參見：

• MDN —— :hover
• MDN —— :active
• MDN —— cursor
• W3school —— :hover （英文）
• W3school —— :active （英文）
• W3school —— cursor （英文）

---

也可以看看：

• Material Design —— States （英文）
• Q語言 —— 動效
• Q語言 —— 交互
• WeDesign —— WeUI
• CSS UI elements
• 某些電腦管家的卸載界面（雖然是反向使用