요소 위에 마우스를 가져갈 때 형제 선택기에서 CSS 불투명도 전환이 작동하지 않습니다.

Question

4 번째 이후의 목록 항목 요소가 모바일에서 display:none; opacity:0이되는 반응 형 메뉴를 구성했습니다. 네 번째 요소는 아이콘 인 또 다른 목록 항목입니다. 아이콘 위에 마우스를 올려 놓으면 숨겨진 메뉴 항목은

li:nth-child(4):hover ~ li { display:block; opacity:1; }

내가가는 전환을 얻을 수없는 내 CSS에 transition: all 0.5s ease 스틱 아무리을 사용하여 아래에 차단 목록으로 표시됩니다. 나는 형제 선택 자에게 연기하고 있기 때문에 제대로 작동하지 않는 무언가를하려고합니까? 아니면 제가 잘못하고있는 것입니까?

모바일 버전을 표시하는 fiddle : https://jsfiddle.net/nicoleamurray/zap1L8hq/을 참조하십시오.

업데이트 : height으로 정말 멋지게 작동했습니다.

`.mainmenu{ 
float: right; 
text-align: right; 
} 
.mainmenu li{ 
display:inline-block; 
} 
.mainmenu li:nth-child(4):hover ~ li{ 
opacity:1; 
transition-delay: 0s; 
height: 20px; 
} 
.mainmenu li:nth-child(n+5){ 
opacity:0; 
overflow: hidden; 
height: 0; 
display: block; 
transition: all 0.5s 1s; 
}` 

Answer 1

할 수 있습니다 하지 전환 display: 속성입니다. 그것은 보이거나 숨겨져 있습니다. 에 /에서 전환 할 "중간"변이가 없습니다.

두 상태 모두 display: block;으로 설정하면 전환 기능이 작동합니다. inline-block도 작동하지만 다른 레이아웃 세분화가 필요함을 의미 할 수 있습니다. 아래의 미리보기를 들어, 난 그냥 당신이 내가 모든 국가/요소에 투명도를 추가 한 이유입니다, 화면을 전환 할 수 없다는 것을 알아

body { margin: 50px;} 
 

 
.mainmenu{ 
 
    float: right; 
 
    text-align: right; 
 
} 
 
.mainmenu li{ 
 
    display:inline-block; 
 
} 
 
.mainmenu li:nth-child(4):hover ~ li{ 
 
    display:block; 
 
    opacity:1; 
 
} 
 

 
.mainmenu li:nth-child(n+5){ 
 
    display:block; 
 
    opacity:0; 
 
    transition: all 0.5s ease; 
 
}

<ul class="mainmenu" role="menubar"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Features</a></li> 
 
    <li><a href="#">Pages</a></li> 
 
    <li class="mainmenu__icon">:</li> 
 
    <li><a href="#">Events</a></li> 
 
    <li><a href="#">Shortcodes</a></li> 
 
    <li><a href="#">Demo</a></li> 
 
</ul>