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