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

Question

我正在进行一些纯CSS导航，我正在尝试将当前处于“活动”状态的状态转换为悬停状态。我自己并没有完全编写原始代码 ，而且它在某种程度上是一个耗时的逆向工程（原始代码是公共领域）。

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

You can view a demo here.

您可以download the source here或查看上面演示的来源。

<子> P.S。我考虑在网站管理员/程序员/代码审查上发布这个，但它似乎不像这里那么合适，因为这不是要求审查我的代码本身，是一个特定的而不是一般的网络问题，并且是不是关于编程原则......如果我不正确，请随意迁移。 ：）

Answer 1

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

除了a:hover { background:#EEE }，您还可以拥有a:active:hover { background:#EEE }，这只适用于悬停事件中的活动元素。

Answer 2

这是你正确的事情吗？

Demo

Source

模仿由悬停状态

触发的活动状态

关键是这个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}

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