web-dev-qa-db-ja.com

CSS：フォーカスが機能しない

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

デモここ

.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>
cssgoogle-chromepseudo-class
7
DanteVoronoi

Div要素に実際のフォーカス状態が必要な場合は、tabindex属性をそれに追加できます。

.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" tabindex="1" id="row0">
</div>
</div>

同じdiv要素をクリックして色を切り替えるには、javascript（jQuery）を使用する必要があります。

jQuery('#row0').click(function() {
  $(this).toggleClass('orange');
});
.row {
        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>
29
Andy Tschiersch
.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>

これを試してください...

0
vishnu

非表示のチェックボックス入力を追加することにより、CSSトリックでトグル効果をエミュレートできます。

こちらをご覧ください

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; }
0
Vincent G

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

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

以下のフィドルを確認してください：

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

編集：クリックするだけで背景色を削除できるので、Vincent Gの答えは、あなたが望んでいるよりも多くのことをするようです。

0
Rvervuurt