The pop up shows up fine, but does not want to go away.
Notice that with the first pop up, text and background stick, but the former vanishes in the second pop up when hovering over the first link. The text in the first pop up will vanish too if you scroll the page up and down.
<a href="#" title="Pure CSS pop up">Hover over here <span>This is insane!</span></a>
<a class="anotherplace" href="#" title="Pure CSS pop up">Hover over here <span>This is insane!</span></a>
a:hover span {display:inline;}
a span {display:none;position:absolute;top:1.3em;background:yellow;}
a.anotherplace span {top:4.6em;}
This bug seems to be triggered when the A element is not set to "position:relative" and the a span {...} rule contains "position:absolute" with the top property.
In any case, there is an easy fix. You only need to move all your declarations to the a:hover span {...} rule, like this:
a:hover span {display:inline;position:absolute;top:31em;background:yellow;}
a span {display:none;}