Умирают ли всплывающие окна CSS с сенсорными экранами, которые становятся все более распространенными?

Я разрабатываю сайт (клиентский портал), который, вероятно, будет использоваться с мобильными/сенсорными устройствами в какой-то момент в будущем. В прошлом я использовал CSS-код следующим образом: 

div.Info
{
    display: inline;
    position: relative;
    text-decoration: none;
}

div.Info span.InfoDetail
{
    display: none;
}

div.Info:hover span.InfoDetail
{
    padding: 3px;
    display: block;
    position: absolute;
    top: 1em; left: 1em;
    border: 3px inset Gray;
    background-color: White; color: #000;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

Для создания небольших всплывающих окон CSS, которые отображаются при наведении курсора мыши, и они, кажется, работают очень хорошо. Однако я сознаю, что это может или не может работать на сенсорных экранах, поэтому мне было интересно, что такое" правильное " поведение, поскольку не похоже, что есть большая последовательность, которую я нашел через ограниченное количество мобильные браузеры, которые я смог посмотреть. Я немного осмотрелся, и кажется, что это событие наведения может активироваться, если объект получает фокус, поэтому я создал некоторый тестовый код в http://mad-halfling.webs.com/testcode.htm , который отображает небольшое всплывающее окно, если вы наведете курсор мыши на текст" Mouse over for detail " или небольшое изображение со стрелкой вверх: -

  • на iOS (я нашел демонстрационный iPad в магазине, чтобы протестировать его) это, кажется, не работает (я только попробовал текст, так как я только что добавил изображение)
  • на MicroB на моем N900, нажав на текст и изображение, оба вызывают всплывающее окно, отлично
  • на Firefox (я думаю, что это Fennec) на моем N900 нажатие на любой из них ничего не делает

Каково Ваше мнение об этом - это кажется позором, поскольку это такой полезный способ создания всплывающих окон без необходимости прибегать к javascript, но если он не будет работать с сенсорными экранами в будущем, мне придется пересмотреть свою стратегию

Ура

MH

2 2
css touchscreen tablet

2 ответа:

Основная проблема с наведением курсора мыши, в том числе когда он используется для настольных веб-сайтов, заключается в том, что нет указания пользовательского интерфейса поведения.

Это не окончательный ответ, но я заметил, что в тех местах, где вы будете использовать "наведение курсора мыши" теперь на мобильном устройстве, вы можете использовать "длинное касание". Проблема, однако, в том, что ничто в пользовательском интерфейсе не указывает на такое поведение. (Чтобы быть справедливым, соглашения пользовательского интерфейса, которые не имеют никакого указания, были вокруг в течение некоторого времени, как double нажатие).

Эмпирическое правило, вероятно, все еще должно заключаться в том, что, как и при наведении мыши, критическая функциональность не должна требовать их.

2

Почему бы не иметь изображение вопросительного знака в круге (что, по-видимому, является распространенной идиомой) рядом с тем, для чего вы хотите всплывающее окно, и не иметь функции onhover и onclick для отображения вашей документации?

0