Сделайте так, чтобы состояние CSS Hover оставалось после «растяжения»

Я сталкиваюсь с небольшой проблемой, с которой мне никогда прежде не приходилось сталкиваться. Я начинающий веб-дизайнер, и недавно я использовал функцию наведения CSS в div на своей веб-странице. Другое изображение раскрывается, когда человек наводит курсор на этот div; однако, новое изображение исчезает, когда вы «unhover», и я хотел бы, чтобы оно оставалось видимым.

Вот пример кода, который я использую:

#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;
}

Есть ли способ решить эту проблему, используя только CSS? До сих пор я не использовал никакой javascript, и мне это не очень удобно.

В любом случае любые решения будут с радостью приняты! Спасибо.

Ответы на вопрос(9)

Ваш ответ на вопрос