: 대상 요소 내의 링크를 클릭 할 수 있습니까

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; 
} 

내가 나를 .hiddendiv 요소 내의 링크를 클릭하지 않는 초점을 이해하지만 목표 중 하나가 작동하지 않는 것와

<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> 

. 나는 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>