다음 고정 요소를 가져올 수없는 이유는 무엇입니까?

Question

는 설명하지 않으려면 : .chapter-list의

CSS :

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
visibility: hidden; 
} 
.chapter-list:hover, 
.chapter-actions:hover, 
.chapter-words:hover, 
.current-book-actions:hover { 
    visibility: visible; 
} 
.chapter-list { 
width: 200px; 
position: fixed; 
left: 30px; 
top: 30px; 
} 

을 아무리 내가 무엇을 사용 Z- 인덱스, 나는 .chapter-list를 가져 드릴 수 없습니다. .container에는 CSS가 전혀 없으므로 문제의 원인을 알 수 없습니다.

편집 :

이 .chapter-form의 CSS는 다음과 같습니다

는하지만, 호버에 영향을 미치는 수있는 방법

.chapter-form { 
margin: 30px auto 0; 
width: 45%; 
max-width: 640px; 
} 

확실하지.

Answer 1

visiblity: hidden으로 숨겨져 있기 때문에 마우스를 올릴 수 없습니다.

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
visibility: hidden; 
} 

숨겨진 요소는 여전히 문서에서 공백을 차지하지만 사용자가 볼 수 없거나 상호 작용할 수 없습니다. 이것이 개발자 도구에서 요소가 사용하고있는 공간을 여전히 볼 수있는 이유입니다.

편집 - 처음 그 때 (정말 이상한 상호 작용처럼 보인다) 호버에 표시 한 숨겨진 요소를 갖고 싶어 가정은, 당신이 할 수 있습니다 :

.chapter-list, 
.chapter-actions, 
.chapter-words, 
.current-book-actions { 
    opacity: 0; 
} 

.chapter-list:hover, 
.chapter-actions:hover, 
.chapter-words:hover, 
.current-book-actions:hover { 
    opacity: 1; 
}