Cambiar color de letra dentro de div

[FantasmaFito]

Hola. tengo este div:

Código HTML:

<div class="evento" onmouseover="cambiarColor(this);" onmouseout="volverColor(this);">
    <div class="fotoEvento"><img src="imagenes/fotoEvento.jpg" alt="Foto Evento" /></div>
    <div class="descripcionEvento" id="descripcionEvento">
         <p>Exposici&oacute;n <strong>"Jos&eacute; Luis Pascual" </strong><br />3 Punts Galeria, C/Aribau 75, h</p>
    </div>
</div> 

que cuando se le pasa el mouse por encima al div clas="evento" ejecuta las siguientes funciones y cambia el color del div.

Código Javascript:

function cambiarColor(div){
    div.style.backgroundColor='#231F20';
}
function volverColor(div){
    div.style.backgroundColor='white';
}
 

Lo que intento hacer es que tambien al pasarle el mouse por encima se le cambie el color de la letra del p dentro del div class="descripcionEvento". He probado con document.getElementById("descripcionEvento").style .color='white'; pero nada...

¿Alguien tiene idea de como lo puedo lograr?

Muchas gracias!

[zerokilled]

si quieres cambiar el color de letra estas usando la propiedad incorrecta. backgroundColor es para el color de fondo, y color es para el color de fuente.

[FantasmaFito]

Iniciado por zerokilled

si quieres cambiar el color de letra estas usando la propiedad incorrecta. backgroundColor es para el color de fondo, y color es para el color de fuente.

He probado con document.getElementById("descripcionEvento").style .color='white'; pero nada...

[jackson666]

Iniciado por FantasmaFito

... He probado con document.getElementById("descripcionEvento").style .color='white'; pero nada...

Código Javascript:

document.getElementById("descripcionEvento").style.color='#ffffff';
 

[zerokilled]

tu codigo me va perfecto. ahora bien, ¿no tendras algun css aplicado a esos elementos? aunque aun asi no deberias tener problema porque el estilo aplicado en atributo style tiene mayor especificidad que los selectores de una hoja de estilo. a no ser que alguna propiedad tenga el valor !important.

[FantasmaFito]

Iniciado por zerokilled

tu codigo me va perfecto. ahora bien, ¿no tendras algun css aplicado a esos elementos? aunque aun asi no deberias tener problema porque el estilo aplicado en atributo style tiene mayor especificidad que los selectores de una hoja de estilo. a no ser que alguna propiedad tenga el valor !important.

Gracias por tu respuesta. En el css esta definido el color pero sin !important. ¿Será que no cambia de color porque el p está dentro de un div? ¿No habrá alguna forma en javascript de acceder a un elmento dentro de otro, en este caso al elemento p dentro del div .descripcionEvento?

[zerokilled]

¿Será que no cambia de color porque el p está dentro de un div?

no porque la propiedad color es heredada por el resto de los elementos hijos.

¿No habrá alguna forma en javascript de acceder a un elmento dentro de otro, en este caso al elemento p dentro del div .descripcionEvento?

si se puede usando la estructura del DOM. pero total, no es necesario por lo antes dicho. intenta asignando otro color. sospecho que no estas percibiendo el cambio de color debido a su valor.

[FantasmaFito]

PROBLEMA SOLUCIONADO!!!

El problema era que para el color del p yo hacia:
.descripcionEvento p{
color:red;
}

y lo correcto (no se si decir correcto porque lo anterior también es válido) es:
.descripcionEvento{
color:red;
}

Ahora l afuncion javascript funciona barbaro!


Gracias a ambos por la ayuda!

[zerokilled]

pues en realidad ambas formas son validas y no veo como esa propiedad pudo afectarlo. como ya te habia comentado, el atributo style tiene un mayor nivel de especificidad que cualquier otro selector en css.