置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

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

猛汉♂百科,万男皆可猛的百科全书!转载请标注来源页面的网页链接,并声明引自猛汉百科。内容不可商用。
跳到导航 跳到搜索
想将你的广告挂在此处?点击查看详情!

非官方期刊《唱唱反调》现火热发行中!
MoeSkinPlus CSS,在Vector皮肤与MoeSkin中找到平衡
模仿GOC的一个组织。有兴趣看看吗?
悬赏,做任务,来悬赏板做发布悬赏,或者做个赏金猎人吧!
Icon-info.png
注意!你现在使用的是手机版视图,推荐使用电脑查看,请确保你有指针。

前言

如题,主要介绍:hover:activecursor对交互性的影响与萌百内运用。(?

由于我也不太会所以不会讲的很深,但需要一定HTML、CSS基础。

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

主要是写了一些自己的一点心得,写的不好或需要改进请在评论区或讨论页留言。

简介

:hover:active的区别
  • :hover是指鼠标移至元素上时发生的效果,移出时恢复。
  • :active则是指鼠标按住元素上时发生的效果,松开时恢复。
cursor
  • cursor可更改鼠标移至元素上时指针的样式,移出时恢复。手机端:当然没有指针,部分设备会出现类似:active的效果,表现为短暂半透明蓝覆盖,如与需要效果冲突请使用mobileonlynomobileclass分开写

大多数情况以上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;

这是加了:hovercursor:pointer;的:

现在你会想点下去了,但...点下去了怎么能没有反应,所以再加上:active

这是加了:hovercursor:pointer;:active的:

那么然后就可以再加亿点点装饰,例如边框阴影圆角下划线甚至常态动画等等。但在手机端,:hover:active都需要点击上才会显示,那就需要其他的引导。

如果页面的链接(文字)颜色被更改或页面具有清晰的主题强调色,此处元素颜色也建议选取相似的颜色。

文字

这是一段你不会想点的文字。

那么像之前一样?

还差一点。文字本身就不够凸显,所以最好改变文字的颜色文字背景颜色,当然也可以使用加粗斜体混用来表示。

(i)注意 这里我改了假链的样式,请自行查看默认样式。

最简单的是使用{{假链}}最简单的是使用{{假链}}

{{假链}}自带cursor:pointer和一点:hover:active{{假链}}自带cursor:pointer和一点:hover:active

大多的链接颜色都是#0645AD(电脑版视图-内链)#3366bb(电脑版视图-外链)、#3366CC(手机版视图)

那么然后也可以再加亿点点装饰,例如边框、阴影、斜体/粗体等等,但不建议几个链接不同样式,特别是在同一段落内。

错误案例

人物使用浮动
诺瓦

大多人物不应当使用bob、hang等浮动,除非是带有翅膀天使等角色(但也不建议,除非角色和背景分层),不然会反直觉

能天使


绝赞更新中...咕咕咕

结语

没错,这就结束了。

具体用法与代码写法请参见:
其它:

实例运用:


参见:


也可以看看:

User:鬼影233/悬浮窗