: сенсорный псевдокласс CSS или что-то подобное?

Question

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

Answer 1

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

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

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

Вот цитата из этой ссылки

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

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

Answer 2

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

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

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