efeito em hover

[mksskm 0]

ola galera. sou novo aqui no forum e no css. gostaria de uma ajuda bem explicada e fácil se possível.

estou fazendo meu primeiro site e me deparei com um problema que nao consegui resolver. foi a questao de um efeito hover.

tenho uma dive box e dentro dela tenho mais duas dives uma com uma foto e outra com um texto. eu gostaria de saber como faço para quando eu colocar o mouse dentro da div box o texto mudar de cor e o fundo da div box fique vermelho.

eu ate consegui fazer isso mais um elemento de cada vez.meu codigo esta ai em baicho.

me ajudem por favor

 

 

 

 

<div id= "box">

 

<div id= "foto">

</div>

 

<div id= "texto">

<p>Curso Profissional de JQuery</p>

</div>

</div>

 

 

 

<style>

 

#box{

border:1px solid #d6d6d6;

width:241px;

height:315px;

clear:both;

float:left;

margin-top:35px;

}

 

 

#foto{

background:url(../images/foto.jpg);

background-position:center;

border:1px solid #FFF;

width:193px;

height:128px;

margin-top:25px;

}

#box:hover{

background:#b80b07;

cursor:pointer;

}

#texto{

margin-top:5px;

width:193px;

}

P{

font-family:Ubuntu;

font-size:23px;

font-weight:bold;

color:#333;

letter-spacing:-1px;

}

P:hover{

color:#FFF;

}

 

</style>

[lokaodomau 61]

Tenta assim:

#box:hover {
  background:#b80b07;
  cursor:pointer;
}
#box:hover #texto{
  color:#FFF;
}

Dessa forma, quando o mouse estiver sobre o #box, a cor de #texto ficará com a cor branca.