CSS：当点击隐藏/显示内容时，悬停状态会卡在IOS设备上

Question

这里非常简单的问题：

http://codepen.io/anon/pen/EhAIs

<div class="container">
    <div class="top-wrap">
        <a href="#" class="top">Top</a>
    </div>
    <div class="bottom-wrap">
        <a href="#" class="bottom">Bottom</a>
    </div>
</div>

使用jQuery，我在.top上设置了点击事件，隐藏.top-wrap并显示.bottom-wrap。显示时.bottom的悬停状态被卡住（jsfiddle中的深蓝色，应该是浅蓝色）。到目前为止，这是在iPad和iPhone 5上的IOS7。

我在这里找不到答案，我搜索了很多。有什么建议吗？