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