CSS-HOVER, затрагивающий два divs

Question

Я новичок в CSS. У меня есть два divs: div1 и div2.
div2 находится внутри div1 и нависает над div1, круг преобразуется в синий задний грунт согласно моему требованию.

У меня есть буква «F» внутри div2. Теперь, нависая над div1, в то время как цвет фона меняется на синий, я хочу, чтобы «F» внутри div2 изменился на белый.

Как мне это сделать?

Answer 1

В соответствии с вашими требованиями - TRY THIS DEMO

HTML:

<div id="div1"><div id="div2">F</div></div> 

CSS:

#div1 { 
    position:relative; 
    background:red; 
    width:400px; 
    height:400px; 
    line-height:200px; 
    border-radius:200px; 
    text-align:center; 
    font-size:24px; 
} 
#div1:hover { 
    background:blue; 
} 
#div2 { 
    position: absolute; 
    background:blue; 
    top:100px; 
    left:100px; 
    width:200px; 
    height:200px; 
    background-color:lawngreen; 
} 
#div1:hover #div2 { 
    color:white; 
} 

[Изменено]

В соответствии с вашими комментариями ниже: TRY THIS DEMO

Вот фрагмент моего сомнения jsfiddle.net - Кришна Krish