: แตะ CSS หลอกคลาสหรืออะไรที่คล้ายกัน?

ฉันกำลังพยายามสร้างปุ่มซึ่งเมื่อผู้ใช้คลิกปุ่มนั้นจะเปลี่ยนรูปแบบขณะที่กดปุ่มเมาส์ค้าง ฉันยังต้องการให้เปลี่ยนรูปแบบในลักษณะเดียวกันหากสัมผัสในเบราว์เซอร์มือถือ สิ่งที่เห็นได้ชัดสำหรับฉันคือการใช้ CSS: active pseudo-class แต่ไม่ได้ผล ฉันพยายาม: โฟกัส แต่มันก็ไม่ได้ผลเช่นกัน ฉันลอง: วางเมาส์เหนือและดูเหมือนจะใช้งานได้ แต่มันยังคงรูปแบบไว้หลังจากที่ฉันเอานิ้วออกจากปุ่ม การสังเกตทั้งหมดนี้อยู่ใน 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

ไม่มีสิ่งที่เรียกว่า :touchในข้อกำหนด W3C http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active ควรจะทำงานฉันคิดว่า

สั่งซื้อได้ที่ :active:hoverคลาส/ pseudo เป็นสิ่งสำคัญสำหรับการทำงานอย่างถูกต้อง

นี่คือคำพูดจากลิงค์ด้านบน

บางครั้งตัวแทนผู้ใช้แบบโต้ตอบเปลี่ยนการแสดงผลเพื่อตอบสนองต่อการกระทำของผู้ใช้ CSS มีคลาสหลอกสามแบบสำหรับกรณีทั่วไป:

• : hover pseudo-class ใช้ในขณะที่ผู้ใช้กำหนดองค์ประกอบ (ด้วยอุปกรณ์ชี้ตำแหน่งบางอย่าง) แต่ไม่ได้เปิดใช้งาน ตัวอย่างเช่นตัวแทนผู้ใช้แบบวิชวลสามารถใช้คลาสหลอกนี้ได้เมื่อเคอร์เซอร์ (ตัวชี้เมาส์) วางเมาส์เหนือกล่องที่สร้างโดยองค์ประกอบ ตัวแทนผู้ใช้ที่ไม่สนับสนุนสื่อโต้ตอบไม่จำเป็นต้องสนับสนุนคลาสหลอกนี้ ตัวแทนผู้ใช้ที่เป็นไปตามข้อกำหนดบางอย่างที่สนับสนุนสื่อโต้ตอบอาจไม่สามารถรองรับคลาสหลอกนี้ได้ (เช่นอุปกรณ์ปากกา)
• : คลาสหลอกที่ใช้งานอยู่จะใช้ในขณะที่ผู้ใช้เปิดใช้งานองค์ประกอบ ตัวอย่างเช่นระหว่างเวลาที่ผู้ใช้กดปุ่มเมาส์และปล่อย
• : focus pseudo-class ใช้ในขณะที่องค์ประกอบมีโฟกัส (ยอมรับเหตุการณ์แป้นพิมพ์หรือรูปแบบอื่น ๆ ของการป้อนข้อความ)

เนื่องจากอุปกรณ์เคลื่อนที่ไม่ได้ให้ข้อเสนอแนะเมื่อวางเมาส์เหนือฉันจึงต้องการในฐานะผู้ใช้เพื่อดูข้อเสนอแนะทันทีเมื่อมีการแตะลิงก์ ฉันสังเกตเห็นว่า-webkit-tap-highlight-colorเป็นวิธีที่เร็วที่สุดในการตอบสนอง (อัตนัย)

เพิ่มสิ่งต่อไปนี้ลงในร่างกายของคุณและลิงก์ของคุณจะมีเอฟเฟกต์การแตะ

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

ฉันมีปัญหากับรูปแบบปุ่มหน้าจอสัมผัสบนมือถือ วิธีนี้จะแก้ไขปัญหาปุ่ม hover-stick / active

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>