Можно использовать псевдокласс :active

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

<div style="position: relative;">
  <span class="state">
     <em><i class="total_white_dashed">Волынская</i></em>
     <span class="state-hover">
       <h4><nobr>Волынская</nobr></h4>
       <span class="dealer">
         <p><nobr><b>Зевс</b></nobr><br>
         <nobr>г. Ровно, ул. Гетьмана Сагайдачного, 8</nobr><br>
         <nobr>тел.: (0362) 22-65-17<br>
         <nobr>моб.: (063) 268-01-52, (067) 587-76-23</nobr><br>
         <nobr>rovnozevs2003@mail.ru</nobr></p>
      </span>    
    </span>
  </span>
</div>

В ЦСС я сделал два правила:

.state:active .state-hover { display: block; z-index:1;}
.state-hover:hover { display: block; z-index:1;}

и удалил одно ваше:

.state:hover i { display:none;}

Общий принцип такой: есть основной контейнер .state, в который вложен попап .state-hover. Когда пользователь кликает в основной контейнер, то его состояние переходит в :active. Селектор .state:active .state-hover показывает попап именно в этот момент. Ещё нужно продублировать показ попапа при ховере на нём, чтобы он не пропадал сразу.

Результат:

У этого решения есть как минимум один минус: попап пропадает как только курсор выходит за него. Поэтому я бы не стал ипользовать его в бою. Тёплый ламповый Джиквери делает это лучше.