~ 선택기에 대한 혼란,

Question

좋아요. 나는 독학으로 코더를 쓰고 종종 이해해야하는 것들을 실행합니다.하지만, 웬일인지. 나는 내가 그것을 만들 필요가있는이 이슈에 계속해서 뛰어 들었다. 그래서 한 요소 위로 마우스를 가져 가면 다른 요소에 접근 할 수 있었고, 다른 경우에는 좋은 드롭 다운 목록을 만들 때 필요했다. 그래서 저는 ~ 셀렉터를 사용하여 무언가를 만들어야한다는 것을 친구에게 설명해주었습니다. 그러나 그것을 쓰는 방법이나 작성 방법을 정확히 기억하지 못합니다. 나는 다른 데모를 보았지만 그것을 결코 정말로 이해하지 못했다. http://codepen.io/Peechiee/full/vEZmMY/ 당신은 바이오 섹션으로 이동하면

, 나는 내가 GIF 위에 마우스를 올려 때, 그것은 아래의 요소를 보여 드리겠습니다 있도록 만들려고 노력 해요 :

는 내가 가지고있는 것은 이것이다. 문제는 규칙 집합을 설정하려는 방법에 관계없이 작동하지 않습니다. 이 선택기를 사용하는 방법을 모르기 때문에 그 이유가 무엇인지 상상할 수 없습니다. 때문에 완전한 정직 심지어 그 무엇 확실하지 않다 내가 설정 마지막 규칙에 대한 어떤 선언을 배치하지 않은

.bio1 { 
    height:50%; 
    width:50%; 
    position:absolute; 
    background-color:transparent; 
    color:#FFFFFF; 
    z-index:71; 
    top:7%; 
    left:0%; 
    overflow:hidden; 
} 


.bio2 { 
    height:50%; 
    width:50%; 
    left:0%; 
    top:7%; 
    background-color:GREY; 
    color:#FFFFFF; 
    font-family:MS Gothic; 
    font-size:8pt; 
    z-index:70; 
    position:absolute; 
} 

.bio1:hover ~ .bio2 { } 

:

는 내가 그 부분에 대해 가지고하는 것은 이것이다. 누군가가 나를 위해이 문제를 해결할 수 있는지 궁금 해서요, 아마도 이것이 어떻게 작동하여 앞으로 사용할 수 있을지 설명 해줄 수 있을까요? 그건 그렇고, 내가 사용하고있는 사이트에서 Java를 사용할 수 없으므로 피해주십시오. 미리 감사드립니다. : D

Answer 1

이 주요 이슈 : 당신이 Z- 색인 .bio2 요소에없는 뭔가를

를보고 싶은 경우에 당신이 그것을 늘릴 필요가 있도록, .bio2에 font-size 아주 작은을 설정 한

따라서 .bio1에 마우스를 가져 가면 .bio2에 z- 색인을 설정할 수 있습니다. .bio1에는 z-index: 71이 있으므로 더 높은 값을 선택해야합니다.

.bio1:hover ~ .bio2 { 
    z-index : 72; 
} 

포크 : [? CSS를 ~ (물결/SQUIGGLE/떨림) 선택 할 무엇을] http://codepen.io/anon/pen/KwqOPr

의