css - a:active がサイドバー ウィジェットで機能しないのはなぜですか?

Question

私のcssには次のものがあります：

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

これは私のsidebar.phpにあります：

<h2 class="big">Categories</h2>
<ul class="categories-widget">
   <?php
   global $parent_id;
   wp_list_categories('show_count=1&title_li=&child_of='.$gateway_parent_id.'&show_count=0&hide_empty=0'); ?>
</ul>

a:hover は機能しますが、a:active は機能しません。これには理由がありますか？修正するにはどうすればよいですか?

Answer 1

あなたが持っているので、それはうまくいきません：

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

:active疑似セレクターは、要素が現在マウス カーソルによって押されているときに一致します。だから同じことをしている..

試す ：

.categories-widget li a:hover { text-decoration: underline; }

.categories-widget li a:active {
position:fixed;
padding-top:1px;
color:red;
}