CSS：フォーカスが動作しない

Question

私のプロジェクトで:focusCSS疑似クラスを使用してみました。私がクリックした要素の色を変更したい。今、私は要素の色をクリックすると、それがアクティブな場所でのみ、そしてマウスの上に移動すると古い色に戻ります。 2回目のクリック後、古い色に戻したい。私はChromeを使用しています。

デモhere

.row { 
 
    display: inline-block; 
 
    border: 1px solid grey; 
 
    height: 200px; 
 
    width: 200px; 
 
    line-height: 1em; 
 
    background: grey; 
 
    margin: 5px; 
 
    opacity: 0.1; 
 
} 
 
.row:active, 
 
.row:focus { 
 
    background: orange; 
 
}

<div id="main" class="container"> 
 
    <div class="row" id="row0"> 
 
    </div> 
 
</div>

Answer 1

実際のフォーカス状態をdiv要素にしたい場合は、tabindex属性を追加することができます。

.row { 
 
\t display:inline-block; 
 
    border:1px solid grey; 
 
    height:200px; 
 
    width: 200px; 
 
    line-height:1em; 
 
    background: grey; 
 
    margin: 5px; 
 
    opacity: 0.1; 
 
} 
 

 
.row:active, .row:focus { background: orange; } 
 

<div id="main" class="container"> 
 
<div class="row" tabindex="1" id="row0"> 
 
</div> 
 
</div>

あなたは同じdiv要素をクリックして色を切り替えたい場合は、ジャバスクリプト（jQueryの）を使用する必要があります。

jQuery('#row0').click(function() { 
 
    $(this).toggleClass('orange'); 
 
});

.row { 
 
\t display:inline-block; 
 
    border:1px solid grey; 
 
    height:200px; 
 
    width: 200px; 
 
    line-height:1em; 
 
    background: grey; 
 
    margin: 5px; 
 
    opacity: 0.1; 
 
} 
 

 
.row.orange { background: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="main" class="container"> 
 
<div class="row" id="row0"> 
 
</div> 
 
</div>

Answer 2

あなたは隠されたチェックボックスの入力を追加することにより、CSSのトリックでトグル効果をエミュレートすることができます。

See it here

HTML：

<div id="main" class="container"> 
    <input type="checkbox" /> 
    <div class="row" id="row0"> 
    </div> 
</div> 

CSS：

.container { position: relative; } 
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; } 
input:checked + .row { background: orange; } 

Answer 3

あなたが探しているものは:visitedあり、BUこれはdivでは機能しません。それにはaタグ（href="#"を含む）を使用する必要があります。フィドル以下

.row:active, .row:visited { background: orange; } 

チェック：

http://jsfiddle.net/uuyNH/32/

編集：ビンセント・Gの答えはあなたが離れてクリックして背景色を取り除くことができるので、あなたがが欲しいものをもっとやっているようです。

Answer 4

.row { 
 
    display:inline-block; 
 
    border:1px solid grey; 
 
    height:200px; 
 
    width: 200px; 
 
    line-height:1em; 
 
    background: grey; 
 
    margin: 5px; 
 
    opacity: 0.1; 
 
} 
 

 
.row:active, .row:focus { background: orange; opacity:1 }

<div id="main" class="container"> 
 
<div class="row" tabindex="1" id="row0"> 
 
</div> 
 
</div>

私はあなたが「相互作用要素」、すなわちリンク、入力、ボタンやsomesuchない何かを集中することができます確信していない