css - css コードで a:active が機能していません

Question

私はこのようなCSSコードを使用しています

.top_nav ul li a{ 
  color: #444; background: #111;
}
.top_nav ul li a:hover{
  color: #fff; background: #555;
}
.top_nav ul li a:active{
  color: #111; background: #fff;
}

しかし、問題は、リンクの背景が変わらないナビゲーションメニューで、ページがアクティブなときにこれです。そのリンクの背景は他のものと同じです。

Answer 1

You are probably looking for focusing an active link in your menu with different color. Mind that a:active is not intended for that purpose.

A link only takes up the a:active state when it is clicked, so you only see the change for a few seconds. You should look for a different way for getting it done, like adding a new css class for the selected menu item from your server side script.

Answer 2

アクティブは、クリックしたときにのみ適用されます。このようにしてください：

<li><a href="" class="active">Link</a></li>

そしてそれをスタイリングします

top_nav ul li a.active {
   color: #111;
   background: #fff;
}

Answer 3

a:active セレクターは、アクティブなページではなく、リンクのアクティブな状態を参照します。

http://www.w3schools.com/cssref/sel_active.asp

現在表示しているページのメニュー項目に「アクティブなページ」クラスを設定し、CSS でそれを参照する必要があります。

静的な HTML ページがある場合は、現在アクティブなページを表すクラスをナビゲーション項目に追加できます。

<li class="current">...</li>

css を次のように変更します。

.top_nav ul li.current a {
  color: #111; background: #fff;
}