: sentuh kelas semu CSS atau yang serupa?

Saya mencoba membuat tombol, sehingga ketika pengguna mengkliknya, gayanya berubah saat tombol mouse ditekan. Saya juga ingin mengubah gayanya dengan cara yang sama jika disentuh di browser seluler. Hal yang tampaknya jelas bagi saya adalah menggunakan CSS: pseudo-class aktif, tetapi itu tidak berhasil. Saya mencoba: fokus, dan itu tidak berhasil juga. Saya mencoba: arahkan kursor, dan sepertinya berhasil, tetapi gaya tetap dipertahankan setelah saya melepaskan jari dari tombol. Semua pengamatan ini dilakukan pada iPhone 4 dan Droid 2.

Adakah cara untuk meniru efeknya pada browser seluler (iPhone, iPad, Android, dan semoga yang lainnya)? Untuk saat ini, saya melakukan sesuatu seperti ini:

<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>

Kelas semu: aktif untuk browser desktop, dan kelas aktif untuk browser sentuh.

Saya ingin tahu apakah ada cara yang lebih sederhana untuk melakukannya, tanpa melibatkan Javascript.

Tidak ada yang namanya :touchdalam spesifikasi W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active harus bekerja, saya pikir.

Urutan pada kelas :active/ :hoverpseudo penting agar dapat berfungsi dengan benar.

Berikut adalah kutipan dari tautan di atas

Agen pengguna interaktif terkadang mengubah rendering sebagai tanggapan atas tindakan pengguna. CSS menyediakan tiga kelas pseudo untuk kasus umum:

• Pseudo-class: hover berlaku saat pengguna menentukan elemen (dengan beberapa perangkat penunjuk), tetapi tidak mengaktifkannya. Misalnya, agen pengguna visual dapat menerapkan kelas semu ini saat kursor (penunjuk mouse) mengarahkan kursor ke kotak yang dibuat oleh elemen. Agen pengguna yang tidak mendukung media interaktif tidak harus mendukung kelas semu ini. Beberapa agen pengguna yang mendukung media interaktif mungkin tidak dapat mendukung kelas semu ini (misalnya, perangkat pena).
• Pseudo-class: aktif berlaku saat sebuah elemen sedang diaktifkan oleh pengguna. Misalnya, di antara waktu pengguna menekan tombol mouse dan melepaskannya.
• Pseudo-class: fokus berlaku saat elemen memiliki fokus (menerima acara keyboard atau bentuk lain dari input teks).

Karena seluler tidak memberikan umpan balik hover, saya ingin, sebagai pengguna, melihat umpan balik instan ketika tautan diketuk. Saya perhatikan itu -webkit-tap-highlight-coloradalah yang tercepat untuk merespons (subjektif).

Tambahkan yang berikut ini ke tubuh Anda dan tautan Anda akan memiliki efek ketuk.

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

Saya mengalami masalah dengan gaya tombol layar sentuh seluler. Ini akan memperbaiki masalah hover-stick / tombol aktif Anda.

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>