css - 如何使链接的事件状态(在 CSS 中)起作用？

Question

不明白为什么 a:active 不起作用! 希望链接按钮在事件时保持蓝色 (#1770b8)，与悬停状态相同。 [在 Firefox、IE 和 Chrome 中试过]

我是不是做了什么傻事？!

a:悬停 - 悬停效果很好。

一个:链接 - 按钮是黑色的，所以这有效。

a:访问过 - 按钮保持黑色(不默认为灰色)所以这有效。

.woocommerce-MyAccount-navigation li a:link,
.woocommerce-MyAccount-navigation li a:visited {
    padding:5px;
    display:block;
    width:150px;
    color:#ffffff;
    background-color:#000 !important;
    border:1px solid #000;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:active {
    padding:5px;
    display:block;
    width:150px;    
    color:#ffffff;        
    background-color:#1770b8 !important;
    border:1px solid #000;
}

Answer 1

你告诉事件链接有一个白色的前景 color 和一个与悬停状态相同的 background-color (蓝色， #1770b8)。这使得无法看到状态的差异。

如果您将 :active 状态分离到一个新的样式指令中，您可以看到它正在工作。例如，我将链接的事件前景色设置为红色:

.woocommerce-MyAccount-navigation li a:link,
.woocommerce-MyAccount-navigation li a:visited {
  padding: 5px;
  display: block;
  width: 150px;
  color: #ffffff;
  background-color: #000 !important;
  border: 1px solid #000;
}

.woocommerce-MyAccount-navigation li a:hover {
  padding: 5px;
  display: block;
  width: 150px;
  color: #ffffff;
  background-color: #1770b8 !important;
  border: 1px solid #000;
}

.woocommerce-MyAccount-navigation li a:active {
  color: red;
}

<div class="woocommerce-MyAccount-navigation">
  <li><a href="#">test link</a></li>
</div>

https://jsfiddle.net/upomysez/