: торкнутися псевдокласу CSS чи чогось подібного?

Question 1

Я намагаюся зробити кнопку такою, що коли користувач натискає на неї, вона змінює свій стиль, поки утримується кнопка миші. Я також хочу, щоб він змінив свій стиль подібним чином, якщо його торкнутися в мобільному браузері. Мені здавалося очевидним було використання CSS: активний псевдо-клас, але це не спрацювало. Я спробував: зосередитись, і це теж не спрацювало. Я спробував: навести, і це, здавалося, спрацювало, але він зберіг стиль після того, як я зняв палець з кнопки. Всі ці спостереження були на 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>

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

Мені цікаво, чи існує простіший спосіб зробити це, не залучаючи Javascript.

Question 2

Немає такого поняття, як :touchу специфікаціях W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active повинен працювати, я б подумав.

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

Ось цитата з цього посилання вище

Інтерактивні агенти користувачів іноді змінюють візуалізацію у відповідь на дії користувача. CSS забезпечує три псевдокласи для загальних випадків:

Псевдо-клас: hover застосовується, поки користувач позначає елемент (за допомогою якогось вказівного пристрою), але не активує його. Наприклад, візуальний користувальницький агент може застосувати цей псевдо-клас, коли курсор (вказівник миші) наводить курсор на поле, сформоване елементом. Агенти користувачів, які не підтримують інтерактивні медіа, не повинні підтримувати цей псевдо-клас. Деякі відповідні користувацькі агенти, що підтримують інтерактивні носії, можуть не підтримувати цей псевдо-клас (наприклад, ручка).

Псевдо-клас: активний застосовується, коли елемент активується користувачем. Наприклад, між тим, як користувач натискає кнопку миші та відпускає її.

Псевдо-клас: focus застосовується, поки елемент має фокус (приймає події клавіатури або інші форми введення тексту).

Question 3

Оскільки мобільний пристрій не дає зворотного зв’язку при наведенні, я хочу, як користувач, бачити миттєвий зворотний зв’язок при натисканні на посилання. Я помітив, що -webkit-tap-highlight-colorна нього реагують найшвидше (суб’єктивно).

Додайте до свого тіла наступне, і ваші посилання матимуть ефект натискання.

body {
    -webkit-tap-highlight-color: #ccc;
}

Question 4

У мене були проблеми із стилем оформлення мобільних сенсорних кнопок. Це вирішить ваші проблеми з кнопкою наведення курсора / активної кнопки.

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>

Розгорніть фрагмент