Html CSS:hover有效，但：active无效

我正在准备一个WordPress主题，不明白为什么我的CSS中的

：active

不工作，而

：hover

工作正常

HTML:

（…）










(...)

CSS:

div#主菜单{
浮动：左；
宽度：140px；
高度：430px；
边缘顶部：48px；
背景图像：url（“img/mainMenu.svg”）；
背景尺寸：封面；
文本对齐：居中；
}
div#主菜单a{
字体系列：“Raleway”，无衬线；
字体大小：10.6pt；
文字装饰：无；
}
div#主菜单a:链接，div#主菜单a:已访问，div#主菜单a:活动{
颜色：#262E5B；
}
div#主菜单a：悬停{
颜色：#262E5B；
}
a#mm#u 1{
位置：相对位置；
显示：表格单元格；
顶部：21px；
左：18px；
宽度：120px；
高度：35px；
垂直对齐：中间对齐；
}
a#mm#u 1:悬停，a#mm#u 1:活动{你想做什么？如果你删除：hover并按下链接，我想你会发现：active工作得很好。但是它没有多大用处，因为你的样式和你在它上面悬停时一样。所以基本上你在它上面悬停，然后背景图像显示，然后你点击链接并点击它相同的背景图像不断显示

a#mm_1:active {        
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

当鼠标光标位于元素的正上方时，将选择该元素

单击（或以其他方式激活）元素时，应用样式

在代码中，您的
：hover
和
：active
样式是相同的

a#mm_1:hover, a#mm_1:active {
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

在悬停或单击时，您不会注意到任何差异

然而，给每一个不同的风格，你会看到不同：

a#mm_1:hover { background-color: yellow; }

a#mm_1:active { background-color: red; }

当用户在页面上时，我希望突出显示链接，其引导方式与他在页面上移动鼠标的方式相同。这不是
：active
的工作方式吗？否：active意味着：在我单击元素时执行此操作。感谢您的解释。
a#mm_1:hover, a#mm_1:active {
        background-image: url('img/ElementAbout.png');   
        background-size: cover;
}

a#mm_1:hover { background-color: yellow; }

a#mm_1:active { background-color: red; }