CSS - 在此示例中将当前活动状态更改为悬停状态

Question

我正在研究一些纯 CSS 导航，我正在尝试将当前的“活动”状态更改为悬停状态。我自己并没有完全编写原始代码，对其进行逆向工程有点耗时（原始代码是公共领域）。

我希望当前的“活动”状态（即 menu2）也< /em> 悬停状态，而不是仅仅将背景颜色更改为更深一些。

您可以在此处查看演示。

您可以在此处下载源代码 或从上面的演示中查看源代码。

_{ps 我考虑将其发布在网站管理员/程序员/代码审查上，但它似乎并不像这里那么合适，因为这并不是要求对我的代码本身进行审查，而是一个特定的网络而不是一般的网络问题，与编程原理无关...如果我不正确，请随意迁移。 :)}

Answer 1

这就是你所追求的对吗？

演示

源

模仿悬停状态触发的活动状态，

关键是这个 css：

#hNav>ul>li:hover {height:52px;margin:0;padding:0}
#hNav>ul>li:hover>span.o1{background:transparent url('http://i.imgur.com/ax6LZ.png') left top no-repeat;display:block;height:52px}
#hNav>ul>li:hover>span a{background:transparent url('http://i.imgur.com/zapF1.png') right top no-repeat;color:#000;padding:22px 0 0}

_{当然这些是演示网址...根据需要替换。}

Answer 2

我不确定这是否是您想要的，但如果您尝试在活动元素上显示悬停的特定样式，您可以通过将 CSS 伪元素链接在一起来实现它，即：

以及 a:hover {background:#EEE } 您可以使用 a:active:hover {background:#EEE } ，它仅适用于悬停事件上的活动元素。