자식 div에 영향을 미치지 않고 CSS 호버로 색상 변경

Question

내 원래 문제는 호버시 색상을 변경하는 div 안에 부트 스트랩 아이콘이 포함됩니다. 단순성에 대한 , 나는이 문제를 설명하기 위해 다음과 코드로 jsfiddle을 만들어

HTML :

<div id="parent"> 
    <div id="child"> 
    </div> 
</div>​ 

CSS :

#parent{ 
background-color:red; 
width:100px; 
height:100px; 
} 

#parent:hover #child{ 
background-color:blue; 
display:block;  
} 
#child{ 
background-color:transparent; 
width:10px; 
height:10px; 
display:none; 
border: 1px solid black; 
} 

jsfiddle이 here

문제 찾을 수 있습니다 :

이 코드의 결과는 내가 성취하고자하는 것이 아닙니다. #child을 background-color: tranparent으로 표시하고 싶지만 #parent을 파란색으로 변경하고 싶습니다.

내가 알고 내 :hover 잘못이지만, 어떻게 하나 :hover (변경 #parent의 색상과 #child 표시)에 2 개의 다른 일을 적용합니까?

Answer 1

당신은 다음과 같은 것을 쓸 수 있도록, 하나와 함께 할 수없는 두 개의 선택기를 사용합니다

#parent:hover{ 
background-color:blue; 
} 
#parent:hover #child { 
display:block; 
} 

데모 : 나는 그것의 불가능을 생각http://jsfiddle.net/qTdkt/2/