Problema con hover

[kenproxd]

Hola,

Tengo un problema muy extraño. Resulta que hice un div con el siguiente código:

Código CSS:

#texto_principal {
    display: inline-block;
    position: absolute;
    top: 350px;
    background: #000;
    padding: 10px;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
    text-align: left;
}
#texto_principal:hover {
    background: #292825;
    
}
.sub_principal {
    font-size: 17px;
    color: #edf15a;
}
 

Código HTML:

<div id="texto_principal">
TITULO PRINCIPAL<br />
<span class="sub_principal">DESCRIPCION</span>
</div>
 

Se supone que al hacer hover en éste debe cambiar el color de fondo. Resulta que al poner el mouse encima del área donde está la etiqueta span el fondo sí cambia de color. Pero, al poner el mouse encima del texto que no lleva ninguna etiqueta el fondo regresa a ser negro.

Dejo una imagen para un mejor entendimiento: el área roja es la que no reconoce el hover y la verde es la que sí lo reconoce.



Espero su ayuda

[ArturoGallegos]

compañero por favor muestre el resto de su código con lo que ha expuesto funciona correctamente

¿estas utilizando un doctype valido? ¿el problema se presenta en algún navegador en especifico?

[kenproxd]

Gracias por tu respuesta. Probé moviendo las propiedades del div contenedor y resultó ser el z-index.

Un abrazo!