如题,主要介绍:hover
、:active
与cursor
对交互性的影响与萌百内运用。(?
由于我也不太会所以不会讲的很深,但需要一定HTML、CSS基础。
本文用到的例子主要使用了{{Hovers}}和U:鬼影233/actives进行演示。
主要是写了一些自己的一点心得,写的不好或需要改进请在评论区或讨论页留言。
:hover
和:active
的区别:hover
是指鼠标移至元素上时发生的效果,移出时恢复。:active
则是指鼠标按住元素上时发生的效果,松开时恢复。cursor
cursor
可更改鼠标移至元素上时指针的样式,移出时恢复。手机端:当然没有指针,部分设备会出现类似:active
的效果,表现为短暂半透明蓝覆盖,如与需要效果冲突请使用mobileonly
与nomobile
class分开写大多数情况以上3个都可以混用。
<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>
:hover
和:active
的样式表。.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
:active
cursor
:hover
(英文):active
(英文)cursor
(英文)也可以看看: