：ターゲット要素内のリンクをクリックすることはできます

Question

私は以下のコードを持っています。次のCSS

nav{ margin-top: -70px; 
} .clicker { font-size: 4em; outline:none; cursor:pointer; float:right;  border-padding:4px; border-right: 5px solid #ed2024; } 

.hiddendiv{ display:none; width:300px; font-size: 2em; background-color:#ed2024; float:left; padding:5px; } 

.clicker:focus + .hiddendiv{ display:block; } 

.clicker:focus{ display:block; float:left; 
} 

.hiddendiv a{ float: left; 
margin-left: 10px; 
} 

と

<nav> 
<div class="clicker" tabindex="1">menu</div> 
<div class="hiddendiv"> <a href="/register/register">Register</a> 
<a href="/account/login">Login</a></div> 
</nav> 

私は、フォーカスは私が.hiddendiv要素内のリンクをクリックすることはできませんが、ターゲットはどちらか動作するようには思えないことを理解しています。私はCSSだけでこれを構築したいと思います。任意のヒント？

Answer 1

CSSでコンテンツを表示/非表示にするには、チェックボックスのラベルを使用して状態を切り替えます。

.clicker { 
 
    font-size: 4em; 
 
    cursor: pointer; 
 
} 
 

 
.hiddendiv, #checkbox { 
 
    display: none; 
 
} 
 

 
input:checked + .hiddendiv { 
 
    display: block; 
 
}

<nav> 
 
    <label class="clicker" tabindex="1" for="checkbox">clicker</label> 
 
    <input id="checkbox" type="checkbox"> 
 
    <div class="hiddendiv"> <a href="/register/register">Register</a> 
 
    <a href="/account/login">Login</a></div> 
 
</nav>

しかし、あなたが:targetにそれをトリガーしたい場合は、私が必要なまさにこの

.clicker { 
 
    font-size: 4em; 
 
    cursor: pointer; 
 
} 
 

 
.hiddendiv { 
 
    display: none; 
 
} 
 

 
.hiddendiv:target { 
 
    display: block; 
 
}

<nav> 
 
    <div class="clicker" tabindex="1"><a href="#hiddendiv">menu</a></div> 
 
    <div class="hiddendiv" id="hiddendiv"> <a href="/register/register">Register</a> 
 
    <a href="/account/login">Login</a></div> 
 
</nav>