Html a：主动不'；a:悬停功能正常

我对“a:主动”一点也不工作感到困扰。另一方面，“a:悬停”工作正常

/*CSS文档*/
@字符集“utf-8”；
/*主要HTML元素*/
身体{
字体系列：“开放式SAN”；
字体大小：14px；
背景色：#FFFFFF；
颜色：#1B242D；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
h1{
字号：26px；
颜色：#FFFFFF；
}
氢{
字体大小：20px；
颜色：5EB59C；
}
h3{
字号：18px；
颜色：#28BDEA；
}
h4{
字体大小：14px；
颜色：#00ACDF；
}
/*巴特特异性*/
#主容器{
位置：绝对位置；
宽度：100%；
身高：100%；
填充：0px；
边际：0px；
}
#顶部容器{
位置：固定；
顶部：0px；
宽度：100%；
高度：150像素；
背景色：#1B242D；
z指数：1；
}
#顶栏{
位置：绝对位置；
顶部：0px；
高度：5px；
宽度：100%；
背景色：#00ACDF；
溢出：隐藏；
}
#主容器{
位置：绝对位置；
宽度：100%；
身高：100%；
顶部：0px；
颜色：#FFFFFF；
}
#头颅箭头{
位置：绝对位置；
顶部：150px；
右：65px；
宽度：0px；
高度：0px；
左边框：80px实心透明；
右边框：80px实心透明；
边框顶部：60px实心#1B242D；
}
#标题文字{
位置：绝对位置；
底部：0px；
左：5px；
}
#顶置导航{
位置：绝对位置；
顶部：5px；
右：35px；
}
#托普纳夫{
列表样式类型：无；
边际：0px；
填充：0px；
}
#托普纳夫酒店{
显示：内联块；
}
#托普纳夫酒店{
显示：块；
左侧填充：10px；
垫底：5px；
右边填充：10px；
文本对齐：居中；
颜色：#FFFFFF；
字体大小：16px；
文字装饰：无；
边框左下半径：5px；
边框右下半径：5px；
}
/*#TopNav a:链接{
文字装饰：无；
} */
/*#TopNav a：访问过{
文字装饰：无；
颜色：#FFFFFF；
} */
#TopNav ul li a：悬停{
文字装饰：无；
字体大小：！重要；
颜色：#FFFFFF；
背景色：#28BDEA；
}
#TopNav ul li a：激活{
文字装饰：无；
颜色：#FFFFFF；
背景色：#00ACDF；
}
#中容器{
位置：绝对位置；
顶部：160px；
填充：0px；
边际：0px；
宽度：100%；
}
#主要内容{
位置：绝对位置；
宽度：自动；
右：305px；
左：10px；
垫底：10px；
}
#内容分离器{
位置：固定；
宽度：1px；
身高：80%；
右：295px；
背景色：#8D9299；
}
#新闻容器{
位置：绝对位置；
顶部：50px；
右：25px；
最大宽度：250px；
最小宽度：250px；
文本对齐：居中；
}
#底部容器{
位置：固定；
底部：0px；
背景色：#8D9299；
宽度：100%；
高度：25px；
颜色：#FFFFFF；
文本对齐：居中；
}
#页脚内容{
位置：绝对位置；
顶部：3px；
宽度：100%；
文本对齐：居中；
}

家
这里的页面标题…非常热烈地欢迎来到我的个人投资组合网站。







这里有一些文字

这里有一些消息


这里有更多的新闻

版权公告

问题在于：

#TopNav a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

#TopNav a:active {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #00ACDF;
}

如果您观察到这两种状态之间没有差异。它们是一样的。在这种情况下，活动类实际上可以工作，但由于它在

CSS

方面与悬停状态相同，因此在视觉上看不到任何差异

因此，让我们稍微更改一下

active

状态的

CSS

。让我们在

活动状态下添加带有黑色文本的橙色背景。因此，该类将修改如下：

#TopNav a:active {
    text-decoration: none;
    color: Black;
    background-color: orange;
}

现在，您可以观察到它是有效的。只需注意，当您单击链接时，您可以看到锚链接的背景为橙色，而文本变为黑色，正如我们的
active
类的
CSS
所指定的那样

请参见下面的工作说明：


#TopNav{
位置：绝对位置；
顶部：5px；
右：35px；
背景色：#1B242D；
}
#托普纳夫{
列表样式类型：无；
边际：0px；
填充：0px；
}
#托普纳夫酒店{
显示：内联块；
}
#顶置导航a{
显示：块；
左侧填充：10px；
垫底：5px；
右边填充：10px；
文本对齐：居中；
颜色：#FFFFFF；
字体大小：16px；
文字装饰：无；
边框左下半径：5px；
边框右下半径：5px；
}
#TopNav a:链接{
文字装饰：无；
}
#TopNav a:访问了{
文字装饰：无；
颜色：#FFFFFF；
}
#空中导航a：悬停{
文字装饰：无；
颜色：#FFFFFF；
背景色：#00ACDF；
}
#TopNav a:激活{
文字装饰：无；
颜色：黑色；
背景颜色：橙色；
}








我同意-我已经尝试过了，但在完全加载页面后仍然返回到：链接。我也尝试过将“a”和所有状态与#TopNav分开，但由于未知的原因，它仍然用“a:link”覆盖“a:active”。成功地使其工作-是移动CSS中断了主CSS。我已将值更改回原始值，并且它也可以正常工作。谢谢你的指导！