元素交互性——<code>:hover</code>、<code>:active</code>与<code>cursor</code>
前言
如题,主要介绍:hover
、:active
与cursor
对交互性的影响与萌百内运用。(?
由于我也不太会所以不会讲的很深,但需要一定HTML、CSS基础。
本文用到的例子主要使用了{{Hovers}}和U:鬼影233/actives进行演示。
主要是写了一些自己的一点心得,写的不好或需要改进请在评论区或讨论页留言。
简介
:hover
和:active
的区别
:hover
是指鼠标移至元素上时发生的效果,移出时恢复。:active
则是指鼠标按住元素上时发生的效果,松开时恢复。
cursor
cursor
可更改鼠标移至元素上时指针的样式,移出时恢复。手机端:当然没有指针,部分设备会出现类似:active
的效果,表现为短暂半透明蓝覆盖,如与需要效果冲突请使用mobileonly
与nomobile
class分开写
大多数情况以上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:
.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
都需要点击上才会显示,那就需要其他的引导。
如果页面的链接(文字)颜色被更改或页面具有清晰的主题强调色,此处元素颜色也建议选取相似的颜色。
文字
这是一段你不会想点的文字。
那么像之前一样?
还差一点。文字本身就不够凸显,所以最好改变文字的颜色或文字背景颜色,当然也可以使用加粗或斜体或混用来表示。
(i)注意 这里我改了假链的样式,请自行查看默认样式。
{{假链}}自带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
- 某些电脑管家的卸载界面(虽然是反向使用