元素交互性——:hover、:active与cursor
前言
如题，主要介绍:hover、:active与cursor对交互性的影响与萌百内运用。（？
由于我也不太会所以不会讲的很深，但需要一定HTML、CSS基础。
本文用到的例子主要使用了{{Hovers}}和U:鬼影233/actives进行演示。
主要是写了一些自己的一点心得，写的不好或需要改进请在评论区或讨论页留言。
简介
:hover和:active的区别
:hover是指鼠标移至元素上时发生的效果，移出时恢复。:active则是指鼠标按住元素上时发生的效果，松开时恢复。
cursor
cursor可更改鼠标移至元素上时指针的样式，移出时恢复。手机端：当然没有指针，部分设备会出现类似:active的效果，表现为短暂半透明蓝覆盖，如与需要效果冲突请使用mobileonly与nomobileclass分开写
大多数情况以上3个都可以混用。
例子
代码
- 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：
- 值得注意的是，由于萌娘百科的页面不能直接使用内联的伪元素，所以需要编辑者新建一个纯CSS页面保存包含
:hover和:active的样式表。
- 值得注意的是，由于萌娘百科的页面不能直接使用内联的伪元素，所以需要编辑者新建一个纯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
- 某些电脑管家的卸载界面（虽然是反向使用
