Thay đổi màu phông chữ div của con trên chuột mẹ

Question

Tôi có một câu hỏi và tôi không chắc chắn nếu nó có thể, nhưng tôi nghĩ rằng tôi sẽ cố gắng yêu cầu.

Nói rằng tôi có ba div của:

<div id="parent_div"> 

    <div id="child_div_1">Blue</div> 

    <div id="child_div_2">Red</div> 

</div> 

Nếu tất cả các văn bản bên parent_div được thiết lập để màu đen, làm thế nào tôi sẽ làm cho child_div_1 và child_div_2 thay đổi phông chữ màu sang màu xanh và màu đỏ tương ứng, khi div cha mẹ là lơ lửng trên?

Xin lỗi nếu điều này hơi khó hiểu, nhưng có cách nào để làm điều này tốt hơn chỉ với CSS không?

Answer 1

#parent_div:hover #child_div_1 { 
    color: blue; 
} 
#parent_div:hover #child_div_2 { 
    color: red; 
} 

Answer 2

Chỉ cần nhắm mục tiêu các phần tử con có liên quan dựa trên :hover tình trạng phụ huynh:

/* defaults */ 
#parent_div div { 
    color: #000; /* or whatever... */ 
} 

/* hover rules */ 

#parent_div:hover #child_div_1 { 
    color: blue; 
} 
#parent_div:hover #child_div_2 { 
    color: red; 
} 

JS Fiddle demo.

Answer 3

Sử dụng pseudo-class :hover trên yếu tố phụ huynh:

Demo: http://jsfiddle.net/Guffa/M3WsW/