なぜこれはホバリングでもフォーカスでは機能しませんか？

Question

.tdi divの上にマウスを置くと画像が表示されますが、なぜそれが動作しないのですか：フォーカスを当てると、.tdiをクリックすると画像が表示されます。

.div1 { 
 
    float: left; 
 
} 
 

 
.hideDiv { 
 
    display: none; 
 
    background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"); 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    height: 500px; 
 
    background-size: cover; 
 
} 
 

 
.tdi { 
 
    border-style: solid; 
 
    border-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.tdi:hover+.hideDiv { 
 
    display: block; 
 
}

<div class="tdi"> 
 

 
</div> 
 
<div class="hideDiv"> 
 
</div>

Answer 1

:focusをキャッチできるようにするには、あなたの要素はタブやクリックを経由して集中することができなければなりません。フォームの要素とリンクはフォーカスイベントを受信/捕捉でき、他のタグはインタラクティブではないと考えられます。

その他の要素については、文書のフォーカス可能な要素のリストに属性を含めるには、tabindex属性が必要です。これについては、下のリンクを参照してください。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

その要素を集中させることができるならばtabindexグローバル属性を示し、それが（通常はTabキーで、その名の）シーケンシャルキーボードナビゲーションに参加する場合は/どこ。これは、異なる結果が整数の値に

に依存して要素をクリックして応答する可能性があることを示すために、カーソル値を更新する気にも、フォーカス可能な要素の順序を変更しないように、値0を使用し、値として整数を受け入れますホバリングしたときの出来事。

.div1 { 
 
    float: left; 
 
} 
 

 
.hideDiv { 
 
    display: none; 
 
    background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"); 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    height: 500px; 
 
    background-size: cover; 
 
} 
 

 
.tdi { 
 
    border-style: solid; 
 
    border-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor:pointer; 
 
} 
 

 
.tdi:focus+.hideDiv { 
 
    display: block; 
 
}

<div class="tdi" tabindex="0"> 
 

 
</div> 
 
<div class="hideDiv"> 
 
</div>

Answer 2

それがフォーカス可能ではありませんので。デフォルトでは入力要素のみをフォームに設定し、リンクはフォーカス可能です。それは、入力あなたがそれらの内側に書いている、チェックのためです。..

.div1 { 
 
    float: left; 
 
} 
 

 
.hideDiv { 
 
    display: none; 
 
    background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"); 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    height: 500px; 
 
    background-size: cover; 
 
} 
 

 
.tdi { 
 
    border-style: solid; 
 
    border-color: red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.tdi:focus+.hideDiv { 
 
    display: block; 
 
}

<div class="tdi" tabindex="0"> 
 

 
</div> 
 
<div class="hideDiv"> 
 
</div>