: CSS sözde sınıfına veya benzer bir şeye dokunun?

Kullanıcı tıkladığında fare düğmesi basılı tutulurken stilini değiştirecek şekilde bir düğme yapmaya çalışıyorum. Bir mobil tarayıcıda dokunulduğunda tarzını da benzer şekilde değiştirmesini istiyorum. Benim için görünüşte apaçık olan şey, CSS'yi kullanmaktı: aktif sözde sınıf, ama bu işe yaramadı. Denedim: odaklanma ve işe yaramadı. Denedim: hover ve işe yarıyor gibiydi, ancak parmağımı düğmeden çıkardıktan sonra stilini korudu. Tüm bu gözlemler bir iPhone 4 ve bir Droid 2 üzerindeydi.

Mobil tarayıcılarda (iPhone, iPad, Android ve umarız diğerleri) bu etkiyi kopyalamanın bir yolu var mı? Şimdilik şöyle bir şey yapıyorum:

<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 sözde sınıfı masaüstü tarayıcılar içindir ve active sınıfı dokunmatik tarayıcılar içindir.

Javascript'i dahil etmeden bunu yapmanın daha basit bir yolu olup olmadığını merak ediyorum.

:touchW3C spesifikasyonlarında, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors gibi bir şey yoktur

:active çalışmalı, bence.

Order :active/ :hoversahte sınıfına doğru işlevine bunun için önemlidir.

İşte yukarıdaki bağlantıdan bir alıntı

Etkileşimli kullanıcı aracıları bazen kullanıcı eylemlerine yanıt olarak işlemeyi değiştirir. CSS, yaygın durumlar için üç sözde sınıf sağlar:

• : Hover sözde sınıfı, kullanıcı (bazı işaret aygıtlarıyla) bir öğe atadığında, ancak onu etkinleştirmediğinde uygulanır. Örneğin, görsel bir kullanıcı aracısı, imleç (fare işaretçisi) öğe tarafından oluşturulan bir kutunun üzerine geldiğinde bu sözde sınıfı uygulayabilir. Etkileşimli medyayı desteklemeyen kullanıcı aracılarının bu sözde sınıfı desteklemesi gerekmez. Etkileşimli medyayı destekleyen bazı uyumlu kullanıcı aracıları bu sözde sınıfı (örneğin, bir kalem cihazı) destekleyemeyebilir.
• : Active sözde-sınıfı, bir eleman kullanıcı tarafından etkinleştirilirken geçerlidir. Örneğin, kullanıcının fare düğmesine basıp bıraktığı zamanlar arasında.
• : Focus sözde sınıfı, bir öğenin odağa sahip olması durumunda uygulanır (klavye olaylarını veya diğer metin girişi biçimlerini kabul eder).

Mobil, fareyle üzerine gelme geri bildirimi vermediğinden, bir kullanıcı olarak, bir bağlantıya dokunduğunuzda anında geri bildirim görmek istiyorum. Bunun -webkit-tap-highlight-coloren hızlı yanıt veren (öznel) olduğunu fark ettim .

Aşağıdakileri vücudunuza ekleyin ve bağlantılarınız dokunma etkisine sahip olacaktır.

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

Mobil dokunmatik ekran düğme stiliyle ilgili sorun yaşıyordum. Bu, hover stick / aktif düğme sorunlarınızı çözecektir.

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>