div를 토글 할 수없는 이유

Question

약간의 문제가 있습니다. 클릭 할 때 div를 토글하지 않으므로 HTML5와 CSS3 만 사용하고 JS 또는 jQuery는 사용하지 말고 HTML5 CSS3 만 사용하십시오.

빨간색 영역을 클릭하면 텍스트를 표시하지 않습니다. 여기 내가 문제를 풀려고 노력한 것이지만, 나는 설정했다. 목표는 있지만 작동하지 않는다. 초점이 작동하지 않는다.

HTML

<div class="click-me"> 
    <div class="over"> 
     Lorem ipsum dolor sit amet 
    </div> 
</div> 

CSS

.click-me{ 
    position:relative; 
    width: 100px; 
    height:60px; 
    background-color:red; 
    cursor:pointer; 
} 
.over{ 
    display:none; 
    position:absolute; 
    bottom:-50px; 
    left:0px; 
} 
.click-me:target .over{ 
    display:block; 
} 

https://jsfiddle.net/53g22ocs/

Answer 1

CSS가있는 경우 가장 가까운 (선택기가 있습니다).

일부 슈퍼 간단한 VanillaJS 두려워하지 않는, 그러나이 JSFiddle

참조, JQuery와, 비록 내 소견이 하나 과잉이다.

호프가 도움이 되었으면 좋겠다.

추가 정보 : 그래서

난 그냥 제공하는 최초의 예에 의해 거라고 ...

당신이 원하는 경우

, 당신이 button처럼 보이게하기 위해 checkbox 스타일을 수 그리고 당신이 뭔가에이 선택기 :checked으로 연결합니다. 난 당신이 그랬던 것과 그것을 달성하기 위해 노력하고 있었다하지만 난 그냥 원하는 느낌있는 JS없이 순수 HTML/CSS에서 그것을 할 수있는 방법을 얻을 생각이 CodePen

처럼

.

PS, sass는 여전히 amigo의 끝에 CSS로 컴파일됩니다. ;)

희망이 도움이됩니다.

Answer 2

는 CSS3에는 클릭 이벤트가 없습니다. 입력 확인란을 선택하여이 작업을 수행 할 수 있지만 jQuery와 함께 click 이벤트가 필요합니다.

Answer 3

<a> 태그를 사용하여 div을 타겟팅 할 수 있다면 그렇게 할 수 있습니다.

.tab div { 
 
    display: none; 
 
} 
 

 
.tab div:target { 
 
    display: block; 
 
}

<div class="tab"> 
 
    <a href="#link1">Click Me</a> 
 

 
    <div id="link1"> 
 
    <h3>Content</h3> 
 
    <p> 
 
     Put stuff here. 
 
    </p> 
 
    </div> 
 
</div>

편집 는 내가 질문을 오해 것 같아요. 아래에서 시도하십시오. 당신이 이것을 달성 할 수 숨겨진 체크 박스를 사용

body { 
 
    margin: 1em; 
 
} 
 

 
#check-button { 
 
    display: none; 
 
} 
 

 
#link1 { 
 
    margin-top: 10px; 
 
    background-color: red; 
 
} 
 

 
#check-button:checked + #button + #link1 { 
 
    display: none; 
 
} 
 

 

 
#button { 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    padding: 2px 5px; 
 
    cursor: pointer; 
 
}

<input type="checkbox" id="check-button"> 
 
<label id="button" for="check-button">Click Here</label> 
 
<div id="link1"> 
 
    <h3>Content</h3> 
 
    <p>Put stuff here.</p> 
 
</div>

Answer 4

.다음은 작업 예입니다

https://jsfiddle.net/cf1ht61w/

은 기본적으로 당신은 오프 스크린 숨겨진 확인란과 클릭 상자를 다룰 것입니다 그것과 연관된 레이블을 가지고있다. 상자를 클릭하면 실제로 라벨을 클릭하고 확인란을 선택하고 형제 요소의 CSS를 변경합니다.

.click-me{ 
 
    position:relative; 
 
    width: 100px; 
 
    height:60px; 
 
    background-color:red; 
 
    cursor:pointer; 
 
} 
 
.over{ 
 
    display:none; 
 
    position:absolute; 
 
    bottom:-50px; 
 
    left:0px; 
 
} 
 

 
#toggleBox { 
 
position: absolute; 
 
z-index: -1; 
 
left: -1000000000px; 
 
top: 1000000000px; 
 
visibility: hidden; 
 
height: 0; 
 
width: 0; 
 
} 
 
#toggleLabel{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
#toggleBox:checked + .over{ 
 
    display:block; 
 
}

<div class="click-me"> 
 
<label for="toggleBox" id="toggleLabel"></label> 
 
<input type="checkbox" id="toggleBox"> 
 
    <div class="over"> 
 
     Lorem ipsum dolor sit amet 
 
    </div> 
 
</div>

Answer 5

여기 내 간단한 시도가의 ...

.click-me{ 
 
    position:relative; 
 
    width: 50px; 
 
    height:60px; 
 
    background-color:red; 
 
    cursor:pointer; 
 
} 
 
.div {position:fixed; 
 
    width: 100px; 
 
    height:60px; 
 
    background-color:red; 
 
    cursor:pointer; 
 
    text-align:right; 
 
    } 
 
.over{ 
 
    display:none; 
 
    position:absolute; 
 
    bottom:-120px; 
 
    left:0px; 
 
    background: blue; 
 
    color: white; 
 
    font-size:15px; 
 
} 
 
.click-me:focus .over{ 
 
    display:block; 
 
}

<button class="div">hide 
 
<button class="click-me">show 
 
    <div class="over"> 
 
     This is done with Html and Css!!! 
 
     Now,Click hide to hide me!!! 
 
    </div> 
 
</button>

'쇼'버튼 텍스트 표시를 집중

및 숨기기 버튼을 클릭 한 후 , 'show'버튼의 초점과 텍스트 숨김이 사라집니다.