: touch Псевдокласс CSS или что-то подобное?

87

Я пытаюсь сделать кнопку так, чтобы, когда пользователь нажимает на нее, она меняет свой стиль, пока кнопка мыши удерживается. Я также хочу, чтобы он изменил свой стиль аналогичным образом, если его коснутся в мобильном браузере. Для меня казалось очевидным использовать псевдокласс CSS: active, но это не сработало. Я попробовал: focus, но тоже не вышло. Я попробовал: hover, и вроде сработало, но стиль сохранился после того, как я убрал палец с кнопки. Все эти наблюдения были на iPhone 4 и Droid 2.

Есть ли способ воспроизвести эффект в мобильных браузерах (iPhone, iPad, Android и, надеюсь, в других)? А пока я делаю что-то вроде этого:

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

Псевдокласс: active предназначен для настольных браузеров, а активный класс - для сенсорных браузеров.

Мне интересно, есть ли более простой способ сделать это без использования Javascript.

Элиас Замария
источник
2
Почти каждый сенсорный браузер обрабатывает такие вещи, как hoverи mousedown/ по- mouseupразному, их сложно учесть.
Чад
В Android и iOS есть псевдоклассы: touchstart,: touchmove,: touchend и: touchcancel, которые вы можете использовать.
Пол Хэнбери
2
Я пробовал устанавливать стили для псевдоклассов: touchstart и: touchend, но они не работали на iPhone или Droid. @Paul Hanbury, вы уверены, что не путаете псевдоклассы CSS с событиями Javascript?
Элиас Замария
1
@ mikez302 - Думаю, ты прав. plugins.jquery.com/plugin-tags/touchstart
Дуг Чемберлен
2
Мне показалось бы глупым представлять это как ответ, но на самом деле ответ - «Нет, это невозможно, вы должны использовать Javascript». То, о чем вы просите, не является частью CSS2 или CSS3. Я думаю, что тот факт, что: active не работает, является проблемой пользовательского агента, о которой вы потенциально можете сообщить как об ошибке в браузерах iOS и Android, но просто для решения вашей проблемы с конечным пользователем ... да, вы должны использовать JS . Вы можете обернуть свой код совместимости проверкой на поддержку ontouchstart .
joelhardi

Ответы:

50

Нет такой вещи, как :touchв спецификациях W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors.

:active должно работать, я думаю.

Порядок в псевдоклассе :active/ :hoverважен для его правильной работы.

Вот цитата из указанной выше ссылки

Интерактивные пользовательские агенты иногда изменяют рендеринг в ответ на действия пользователя. CSS предоставляет три псевдокласса для общих случаев:

  • Псевдокласс: hover применяется, когда пользователь обозначает элемент (с помощью некоторого указывающего устройства), но не активирует его. Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) наводит курсор на поле, созданное элементом. Пользовательские агенты, не поддерживающие интерактивные медиа, не обязаны поддерживать этот псевдокласс. Некоторые соответствующие пользовательские агенты, поддерживающие интерактивные медиа, могут быть не в состоянии поддерживать этот псевдокласс (например, перьевое устройство).
  • Псевдокласс: active применяется, когда элемент активируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.
  • Псевдокласс: focus применяется, пока элемент находится в фокусе (принимает события клавиатуры или другие формы ввода текста).
Дуг Чемберлен
источник
9
Я знал, что прикосновения не существует. Мне было интересно, было ли что-то подобное. : active казалось разумным, но в моих тестах это не сработало.
Элиас Замария
@ mikez302 - Я подумал, вы знаете, что я хочу процитировать свой источник. Я согласен с вами, я не вижу никаких причин, по которым это не сработает, кроме моей точки зрения о том, что порядок очень важен. Я видел, что кто-то опубликовал что-то о псевдоселекторах css для IOS и Android, но я не мог говорить об этих технологиях.
Дуг Чемберлен
Я переключил правила: active и: hover в своем примере, и, похоже, они ничего не сделали.
Элиас Замария
36
@ mikez302: используйте :activeпсевдокласс. Он должен работать, но в некоторых браузерах вам нужен небольшой хак , чтобы заставить его работать: присоединить обработчик события к touchstartсобытию на теле (например: <body ontouchstart="">)
gion_13
5
Просто чтобы коснуться комментария @ mikez302 в последнем ответе, это аккуратное исправление в HTML5 Mobile Boilerplate, которое ссылается на эту статью - alxgbsn.co.uk/2011/10/17/…
Giles Butler
20

Поскольку мобильный телефон не дает обратной связи при наведении курсора, я как пользователь хочу видеть мгновенную обратную связь при нажатии на ссылку. Я заметил, что -webkit-tap-highlight-colorэто самый быстрый ответ (субъективно).

Добавьте следующее в свое тело, и ваши ссылки будут иметь эффект касания.

body {
    -webkit-tap-highlight-color: #ccc;
}
Абдо
источник
Это кажется самым надежным, но выглядит не лучшим образом. Цвет фона, кажется, немного выходит за пределы элемента, делая его на мгновение больше.
Adam
@ Адам, да, я не мог обойти это, насколько я помню, но это всего на долю секунды не было для меня слишком большой проблемой, особенно потому, что это позволило бы пользователю получить обратную связь, которую он щелкнул (что что для них важно в этот отрезок времени)
Абдо
Я фактически получил: active псевдо-стили, работающие в конце, просто привязав функцию к событию document.ontouchstart (через jQuery) с пустым обратным вызовом.
Adam
Неплохая идея :-) Для этой цели я вообще избегал javascript.
Abdo
2
Просто поделиться этим -webkit-tap-highlight-color- нестандартная функция CSS , которую я использую :activeвместо этого, она действительно подходит и имеет смысл.
Рикардо Форнес
0

У меня возникли проблемы с оформлением кнопок мобильного сенсорного экрана. Это исправит ваши проблемы с джойстиком / активной кнопкой.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

mxxn
источник