В моем сценарии есть три 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;
}

<a id="f">Show First content!</a>
<br>
<a id="s">Show Second content!!</a>
Default Content
First content
Second content

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