DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
:active
伪选择器在链接被激活(被点击或以其他方式激活)时更改其外观。 它通常只显示几分之一秒,并提供元素确实被点击的视觉反馈。 它最常用于锚链接 (<a href="#"></a>
)。
例如,以下 CSS 将使锚链接在活动状态下向下移动一个像素(给人一种在三维空间中被推入的感觉)
:active
也可以应用于任何元素。 在下面的 Pen 中,点击页面上的任何位置都会使整个页面变为黄色
最佳做法是涵盖所有“状态”,特别是链接。 一个简单的方法是“LOVE HATE”或
- L
:link
- O
- V
:visited
- E
- H
:hover
- A
:active
- T
- E
以这种顺序进行是理想的。
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
否则,假设您将 :visited
样式列在最后,如果该链接已被访问,它将 覆盖 :active
和 :hover
声明,并且链接将始终为紫色,无论您是否悬停或链接是否处于活动状态(不理想)。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
所有 | 所有 | 所有 | 所有 | 所有 | 所有 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
所有 | 所有 | 所有 | 所有 | 所有 |
“去除” 还是 “记忆”?像记忆术一样?哇……
记忆术:记忆辅助工具,用于帮助回忆呼吸道疾病。
在 iOS 上不起作用 :-( 悬停或活动状态没有显示..
你需要在 body 标签上添加它。
...
是否无法在此处添加显示而不是解析的 html 代码?
先生,我可以问一下吗?当我点击图像时,我应该使用什么来调整其大小。我已经做到了,但问题是我使用了 #id:active{
/* 代码 */
}.
每当我点击链接或图像时,它都会恢复到正常状态。请帮忙。
看来我们需要添加一个“Focus”代码来表明链接已被选中,但你需要为每个页面更改它,而这正是我们试图避免的事情。
我也想要一个代码来显示我们正在访问的页面。
zzz
嗨
在 IoS 上不起作用。
怎么了?
我应该早点读这些文章。感谢您简要解释为什么链接的样式应该按照最佳实践的顺序设置。
我终于在这里找到了我的解决方案,非常感谢。顺便问一下,如何用下拉菜单实现它?这可能吗?我刚开始学习这个。
那个 :active 东西还可以,但我需要一些更类似于更改链接颜色的东西,只要它处于活动状态。突出显示链接,不仅仅是在点击时短暂显示,而是长时间显示。
我找到的简单解决方案是在 HTML 链接中添加一个名为 active 的类,然后在 CSS 中使用 a.active 样式设置你选择的设置。这需要你手动将 class=”active” 添加到每个你想要执行此操作的链接中。
您的评论在这里。要冷静。
55236
对于 iOS,使用:
a:link { -webkit-tap-highlight-color: #aa0000; }
它奏效了!谢谢。
对于那些询问 iOS 修复的人
添加这条 JS 代码将在 iOS 上使伪元素生效。
document.addEventListener("touchstart", function() {},false);
https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
我不太明白它是如何工作的,但它确实有效。神奇!
干得漂亮
L :link
O
V :visited
E
H :hover
A :active
T
E
很棒
非常感谢你的技巧!我花了几个小时才弄明白为什么我的活动状态没有在我的页面上显示。我将 .active 放在列表的末尾了!继续努力!
呃。也就是说列表的开头。哈哈
哇,如此简单但强大!感谢分享!
为什么你没有引入“focus”元素,作为“visited”的优势。每次点击一个新链接时都会发生更改,避免混淆并让活动元素每次都能工作,也许将活动元素和 focus 元素结合起来,你就可以实现选择的效果,除了用鼠标悬停在每个新的(上次没有使用过)链接上……
我有一个菜单列表.. 该列表元素的活动状态颜色没有出现,但背景颜色正在应用,这是为什么呢?
感谢您让 CSS 如此有趣!
我正在做 FreeCodeCamp 的一个投资组合项目,我简直崩溃了,因为我无法理解 CSS。
我很高兴我找到了这个很棒的网站。