アクティブではありませんが、CSSを使用してフォーカスやターゲットはありません

以下は私のコードです。 CSSブロックの「アクティブ」コマンドは、divをクリックすると色が変わるので動作しますが、クリックを取り除くと、CSSブロックの「target」コマンドに記載されているように境界線が赤くなるはずです。アイデア？アクティブではありませんが、CSSを使用してフォーカスやターゲットはありません

<html> 
<body> 

<style type="text/css"> 
.svar-grid { 
    margin: 20px; 
} 

.svar-grid .svar { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid black; 
    border-radius:10px; 
    background:yellowgreen; 
} 


.svar-grid .svar:active { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid black; 
    border-radius:10px; 
    background:green; 
} 

.svar-grid .svar:target { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid red; 
    border-radius:10px; 
    background:green; 
} 

</style> 

<html> 
<div> 
     <div class="svar-grid"> 
      <div class="svar"><h4>Testing</h4></div> 
     </div> 

    </div>

出典

2017-07-17 user5095266

あなたはターゲットが何であるか混乱していると思います。https://developer.mozilla.org/en-US/docs/Web/CSS/:target – Huangism

あなたは:focusを探しています。

https://jsfiddle.net/s0L716zu/

HTML

<div class="svar-grid"> 
     <div class="svar" tabindex="-1"><h4>Testing</h4></div> 
    </div>

CSS

.svar-grid .svar:focus { .... }

あなたはdiv要素は自然にフォーカス可能ではないので、私はdiv要素にtabindex="-1"を追加見ることができるように。それは-1 tabindeが作る与えることはそれは

は、私はあなたがdiv要素に焦点を当てる必要がある理由を確認していないかがある場合にURLで使用されることを意図して、ここで

が https://developer.mozilla.org/en-US/docs/Web/CSS/:targetを行うことになっているもの :targetでフォーカス可能ですそれとの相互作用。 div要素との相互作用がある場合しかし、あなたはおそらく buttonを使用するか、アンカータグ

出典

2017-07-17 19:16:24 Huangism

:targetは、URLの最初の#文字の後に表示される文字列と一致するid属性を持つ要素に適用され、その用途に応じて必要があります。これは、ページ上の特定のものにリンクするときに、そのページに目を向けるためにハイライト表示されるということです。

要素にはidが含まれていないため、:target疑似クラスは適用できません。

:focusは、フォーカスのある要素に適用されます。要素をクリックすると、一般的にフォーカスが与えられますが、要素が最初にフォーカス可能な場合のみです。

フォーカスのポイントは、ポインティングデバイス（マウス、トラックパッドまたはタッチスクリーンなど）を使用せずにユーザーインターフェイスとやりとりするときに、他のメカニズム（タブキーを押すなど）によって対話型コントロール間を移動できるようにすることです。次に、フォーカスされた要素をトリガすることができます（Enterキーを押すなど）。

これは、トリガされたときに要素が何かを行う場合（リンクやボタンの場合など）にのみ有効です。 divは、トリガーされたときにデフォルトで何もしません。これは一般的なコンテナです。

は、JavaScriptを持つ要素（addEventListener）にインタラクティビティを追加することができますし、tabindex属性を使用して、インタラクティブなものとして要素をマークすることができます...しかし、あなたは通常、代わりに（<button>のような）別の要素を選択する必要があります。

出典

2017-07-17 19:17:00 Quentin

アクティブではありませんが、CSSを使用してフォーカスやターゲットはありません

答えて

関連する問題