Estoy enfrentando un pequeño problema con el que nunca he tenido que lidiar antes. Soy un diseñador web principiante y recientemente usé la función de desplazamiento de CSS en un div en mi página web. Otra imagen se revela cuando uno se cierne sobre esta div; sin embargo, la nueva imagen desaparece cuando "no se encuentra" y me gustaría que permanezca visible.

Aquí hay un ejemplo del código que estoy usando:

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about:hover #onabout {
display: block;
}

¿Hay alguna manera de resolver esto usando solo CSS? No he usado ningún javascript hasta ahora y no estoy muy cómodo con él.

De cualquier manera, cualquier solución será aceptada con mucho gusto! Muchas gracias.