元素交互性——<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
• 某些电脑管家的卸载界面（虽然是反向使用