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

Question 1

Я пытаюсь сделать кнопку так, чтобы, когда пользователь нажимает на нее, она меняет свой стиль, пока кнопка мыши удерживается. Я также хочу, чтобы он изменил свой стиль аналогичным образом, если его коснутся в мобильном браузере. Для меня казалось очевидным использовать псевдокласс 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.

Question 2

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

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

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

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

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

Псевдокласс: hover применяется, когда пользователь обозначает элемент (с помощью некоторого указывающего устройства), но не активирует его. Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) наводит курсор на поле, созданное элементом. Пользовательские агенты, не поддерживающие интерактивные медиа, не обязаны поддерживать этот псевдокласс. Некоторые соответствующие пользовательские агенты, поддерживающие интерактивные медиа, могут быть не в состоянии поддерживать этот псевдокласс (например, перьевое устройство).

Псевдокласс: active применяется, когда элемент активируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.

Псевдокласс: 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>

Развернуть фрагмент