CSS - Изменение текущего активного состояния в состояние наведения в этом примере

Question

У меня есть немного чистой навигации по CSS, над которой я работаю, и я пытаюсь перевести то, что в настоящее время является "активным" состоянием, в состояние наведения. Я сам не писал оригинальный код полностью , и это был довольно трудоемкий процесс его обратной разработки (исходный код был общедоступным).

Мне бы хотелось, чтобы текущее "активное" состояние (то есть menu2) было также состоянием наведения вместо простого изменения цвета фона на более темный.

Демонстрацию можно посмотреть здесь.

Вы можете скачать исходный код здесь или просмотреть исходный код из демонстрации выше.

_{p.s. Я подумал о том, чтобы опубликовать это в обзорах веб-мастеров / программистов / кода, но это было не совсем так, как здесь, так как здесь не требуется пересматривать мой код как таковой, это скорее конкретный, чем общий веб-вопрос, и он не о принципах программирования ... Если я ошибаюсь, не стесняйтесь мигрировать. :)}

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}

_{конечно, это демонстрационные URL ... замените при необходимости.}

Answer 2

Я не уверен, что это то, что вам нужно, но если вы пытаетесь отобразить определенный стиль для Hover над активным элементом, вы можете добиться этого, связав вместе псевдоэлементы CSS, то есть:

Как и a:hover { background:#EEE }, у вас может быть a:active:hover { background:#EEE }, который будет применяться только к активным элементам при событии наведения мыши.