Как отобразить и скрыть div с помощью CSS? ⇐ CSS

[Anonymous]

В моем скрипте три элемента div. Я хочу отображать div с class="ab" при наведении курсора на первую строку и отображать div с class="abc" при наведении курсора на вторую строку. В противном случае я хочу отображать div с class="a" по умолчанию.

Но он никогда не отображает div с class="a" .

Код: Выделить всё

.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;

}
#f:hover ~ .abc,.a {
display: none;

}
#s:hover ~ .abc {
display: block;

}
#s:hover ~ .ab,.a {
display: none;
}

Код: Выделить всё

Show First content!

Show Second content!!
Default Content
First content
Second content

Вот мой JSFiddle моей проблемы: JSFiddle Link< /п>

Подробнее здесь: https://stackoverflow.com/questions/205 ... v-with-css