CSS3 전환 트리거가 작동하지 않음

Question

한 요소를 마우스로 가리키면 다른 요소가 전환되는 상황을 만들려고합니다. 나는 일반적으로 아래와 같은 정확한 코드를 사용하고 잘 작동하지만 이번에는 실수로 잘못했다. 누군가가 내가 잘못는지 말해거나 나에게 또 다른 솔루션을 제공 할 수있는 경우

CSS는

#sidebar { 
    width:300px; 
    height:100%; 
    position:fixed; 
    top:0px; 
    padding:10px; 
    left:0px; 
    background:#fff; 
    font-style:none; 
     -webkit-transition: width 2s; 
     transition: width 2s; 
    z-index:1; 

} 

#sideimage { 
    max-width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    background: #111; 
    position: absolute; 
    top: 290px; 
    left: 25%; 
    } 

#sideimage:hover #sidebar { 
    width: 700px; 
} 

, 그것은 매우 감사 할 것입니다.

Link to the page

Answer 1

당신의 CSS는 훨씬 이해가되지 않습니다. #sideimage은 #sidebar의 자식이므로 #sideimage:hover #sidebar도 작동하지 않습니다. 자바 스크립트가없는 하위 이벤트를 기반으로 상위 요소를 변경할 수 없습니다. 정확히 달성하고자하는 것에 대해 자세히 알려주십시오.