x
 
Олег Галайда
4 апреля 2013

Здравствуйте, советчики.

Есть такая интерактивная карта: http://rozma.com.ua/dealers.html

Информация показывается через :hover.

Можно ли реализовать вместо этого всплывание блочка через нажатие только на чистом ЦСС? И если нет, то как оптимальнее всего это сделать?



Можно использовать псевдокласс :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 показывает попап именно в этот момент. Ещё нужно продублировать показ попапа при ховере на нём, чтобы он не пропадал сразу.

Результат:


Волынская

Волынская

Зевс
г. Ровно, ул. Гетьмана Сагайдачного, 8
тел.: (0362) 22-65-17
моб.: (063) 268-01-52, (067) 587-76-23
rovnozevs2003@mail.ru











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


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Павел Радьков
4 апреля 2013

Задержку исчезания можно сделать при помощи transition. Демка:
http://cssdeck.com/labs/onclick_css_popup

Антон Головинов
5 апреля 2013

Вариант Коли не работает в Опере и в IE 9.

Есть ещё псевдокласс :target

Можно его использовать для этих целей. Разметка чуть-чуть меняется. Оборачиваем названия объектов в ссылки:

Волынская

и 

Волынская




В ЦСС добавляем

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

И убираем

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


Смысл в том, что при клике на название на карты мы переходим на страничку с хешем #volynskaya, который заставляет срабатывать псевдокласс :target.

Плюсы: попап не пропадает при уводе курсора, можно дать ссылку на конкретный элемент карты. Работает даже в IE 9.

Минусы: весь этот бардак с хешами записывается в историю браузера.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как готовить макеты для технологов? 6




Недавно всплыло

В бюро есть таймтрекинг для сотрудников? 5 4 2 2