Отображение изображения в активном состоянии

Question

У меня есть некоторые изображения, которые нужно изменить, основываясь не только на наведении, но и на активном состоянии.

Если вы посмотрите страницу здесь: http://site427.mysite4now.net/tazthedog/site1/ Есть несколько вкладок с быстрой печатью экрана и т. Д. Изображение вкладки связано со ссылкой и отображается правильно. Значок во вкладках по умолчанию имеет серый цвет и становится синим при наведении курсора мыши, однако мне также нужно, чтобы он был синим в активном состоянии.

Вот CSS:

.quick-links em:hover { background: transparent url(../images/quick-links.png)10px 9px no-repeat; 
display: block; 
float: left;}

Вот HTML:

 <ul class="tabs">
    <li class="quick-links">
      <a href="#quickLinks" id="">
         <em>
            <span>Screen Printing Quick Links</span>
         </em>
      </a>
    </li>
    <li class="distributor-ql">
       <a href="#distributorQL" id="">
          <em>
             <span>Dealer &amp; Distributor Quick Links</span>
          </em>
       </a>
     </li>
 </ul>

Я пытался добавить .quick-links em: active ... но это не поддерживает его. Я знаю, что есть способ сохранить синий значок в активном состоянии, мне просто нужна небольшая помощь, чтобы понять, что это такое.

Спасибо!

Answer 1

Вы хотите изменить состояние <em>, когда окружающие ссылки активны? Затем используйте правый селектор:

.quick-links a:active em {/* your declaration */}

Используйте то же самое для наведения, особенно если вы хотите сохранить обратную совместимость для IE6. И измените разметку, чтобы удалить <span> и <em>, если это ваш настоящий код.