使用css设置活动锚元素的样式
[英]Styling active anchor elements with css
问题描述
I have some trouble to find a css solution for having an active anchor colored... 
我找到一个css解决方案有一些麻烦，因为有一个活跃的锚着色...
Why are the active anchors not red so that if clicked on "momo" momo keeps red? 为什么活动锚不是红色，所以如果点击“momo”momo保持红色？ Or is active the wrong pseudoclass for that? 或者是活动错误的伪类？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
a:active{
color:red;
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<ul> Navigation
<li class="subli"><a href="#momo">momo</a></li>
<li class="subli"><a href="#ipsi">ipsi</a></li>
</ul>
</body>
</html>
Thanks Juru 谢谢Juru
6 个解决方案
解决方案1
4 已采纳 2012-02-24 13:54:59
:active means "While being activated" eg when it is focused and the enter key is pressed or while it is hovered and the mouse button is being depressed. :active表示“在被激活时”，例如当它被聚焦并按下回车键时或者当它被盘旋并且按下鼠标按钮时。 (Note that since you have have :hover after :active you'll always override it for mouse activates) （注意，因为你有:hover after :active你将永远覆盖它以便鼠标激活）
There is no pseudo-class for "Anchor with an href value that resolves to the current location". “具有解析为当前位置的href值的锚点”没有伪类。 For that you need to need to modify the HTML (preferably before it gets to the browser, but you can use JS as well). 为此，您需要修改HTML（最好在它到达浏览器之前，但您也可以使用JS）。
解决方案2
0 2012-02-24 13:54:47
Switch the order you have your styling setup for your anchor tags 切换为锚标签设置样式的顺序
Change this 改变这个
a:active{
color:red;
}
a:hover{
color:yellow;
}
To this 对此
a:hover{
color:yellow;
}
a:active{
color:red;
}
:active only occurs when you click and hold on the element or the element is focused and you hit enter. :active仅当您单击并按住元素或元素已聚焦并且您按Enter键时才会:active 。
If you want to show the active url as a different color you are going to have to add a class to the current active element and style that class with the color you want 如果要将活动URL显示为不同的颜色，则必须将类添加到当前活动元素，并使用所需颜色设置该类的样式
解决方案3
0 2012-02-24 13:55:12
The styles cascade, you need to switch them. 样式级联，您需要切换它们。
a:hover {
color:yellow;
}
a:active {
color:red;
}
解决方案4
0 2012-02-24 13:57:28
I think you want to use visited not active 我想你想使用访问不活跃
a:visited {color:red;} a：访问过{color：red;}
Active activates only onClick Active仅激活onClick
Visited stays red after you clicked 单击后访问保持红色
解决方案5
-1 2019-03-16 21:29:11
Besides, you can use the target pseudo-class , which is pretty well supported already, to style the element referenced by the anchor. 此外，您可以使用已经得到很好支持的目标伪类来设置锚点引用的元素的样式。
<a href="#this-element">Click here.<div>
<div id="this-element">It's going to be red.<div>
<style>
#this-element:target{
color:red;
}
<style>
解决方案6
-2 2012-02-24 13:54:27
删除:active属性，只需设置a{color:red}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.