Div에 가져 가서 다른 것을 변경하면 작동하지 않습니까? 당신이 DIV 1에 마우스를 가져 가면

Question

내가 사업부와 내가 일 할을 가지고있다 그렇게 이것이 의미 DIV 2.

그래서 나는이 .div1:hover .div2와 CSS입니다 할 수있는 변경 내가 1에 마우스를 가져 가면,이 것 그 변화.

이전에도 같은 스타일 시트에서 사용해 왔지만 어떤 이유로 작동하지 않습니다.

이것은 CSS입니다.

#slide { 
width:220%; 
height:300px; 
text-align:center; 
position:relative; 
top:0px; 
left:0px; 
-webkit-transition: left 2s linear; 
-moz-transition: left 2s linear; 
-ms-transition: left 2s linear; 
-o-transition: left 2s linear; 
transition: left 2s linear; 
} 
.six { 
position:relative; 
top:0px; 
left:0px; 
background-color:#F00; 
} 
.six:hover #slide { 
left:-100%; 
} 

이렇게 나에게 좋을 것이고 동일한 스타일 시트에서 작동하지만 어떤 것이 멈추고 있습니까?

모든 아이디어가 우수 할 것입니다.

Answer 1

.div1:hover .div2 선택은 div2이 div1의 자식 인 경우에만 작동합니다, 그래서 "가리킬 클래스 div1 인 요소의 하위 클래스 div2 인 요소"를 의미합니다.

div2이 div1과 관련이 없다면 JavaScript로만 수행 할 수 있습니다. 다음과 같은 (jQuery 라이브러리 사용) :

$('.div1').hover(function() { 
    $('.div2').addClass('div1-hovered-on'); 
}, function() { 
    $('.div2').removeClass('div1-hovered-on'); 
});