使用css设置活动锚元素的样式

Question

我找到一个css解决方案有一些麻烦，因为有一个活跃的锚着色...

为什么活动锚不是红色，所以如果点击“momo”momo保持红色？ 或者是活动错误的伪类？

<!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>

谢谢Juru

Answer 1

:active表示“在被激活时”，例如当它被聚焦并按下回车键时或者当它被盘旋并且按下鼠标按钮时。 （注意，因为你有:hover after :active你将永远覆盖它以便鼠标激活）

“具有解析为当前位置的href值的锚点”没有伪类。 为此，您需要修改HTML（最好在它到达浏览器之前，但您也可以使用JS）。

Answer 2

切换为锚标签设置样式的顺序

改变这个

    a:active{
    color:red;
    }
    a:hover{
    color:yellow;
    }

对此

    a:hover{
    color:yellow;
    }
    a:active{
    color:red;
    }

:active仅当您单击并按住元素或元素已聚焦并且您按Enter键时才会:active 。

如果要将活动URL显示为不同的颜色，则必须将类添加到当前活动元素，并使用所需颜色设置该类的样式

Answer 3

样式级联，您需要切换它们。

a:hover {
    color:yellow;
}
a:active {
    color:red;
}

Answer 4

我想你想使用访问不活跃

a：访问过{color：red;}

Active仅激活onClick
单击后访问保持红色

Answer 5

此外，您可以使用已经得到很好支持的目标伪类来设置锚点引用的元素的样式。

<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>

Answer 6

删除:active属性，只需设置a{color:red}

使用css设置活动锚元素的样式

问题描述

6 个解决方案

解决方案1
4 已采纳 2012-02-24 13:54:59

解决方案2
0 2012-02-24 13:54:47

解决方案3
0 2012-02-24 13:55:12

解决方案4
0 2012-02-24 13:57:28

解决方案5
-1 2019-03-16 21:29:11

解决方案6
-2 2012-02-24 13:54:27

使用css设置活动锚元素的样式

问题描述

6 个解决方案

解决方案1 4 已采纳 2012-02-24 13:54:59

解决方案2 0 2012-02-24 13:54:47

解决方案3 0 2012-02-24 13:55:12

解决方案4 0 2012-02-24 13:57:28

解决方案5 -1 2019-03-16 21:29:11

解决方案6 -2 2012-02-24 13:54:27

解决方案1
4 已采纳 2012-02-24 13:54:59

解决方案2
0 2012-02-24 13:54:47

解决方案3
0 2012-02-24 13:55:12

解决方案4
0 2012-02-24 13:57:28

解决方案5
-1 2019-03-16 21:29:11

解决方案6
-2 2012-02-24 13:54:27