: chạm vào lớp giả CSS hoặc thứ gì đó tương tự?

Question 1

Tôi đang cố gắng tạo một nút, sao cho khi người dùng nhấp vào nó, nó sẽ thay đổi kiểu trong khi nút chuột đang được giữ. Tôi cũng muốn nó thay đổi phong cách theo cách tương tự nếu nó được chạm vào trong trình duyệt di động. Điều dường như hiển nhiên với tôi là sử dụng CSS: active pseudo-class, nhưng điều đó không hoạt động. Tôi đã thử: tập trung, và nó cũng không hoạt động. Tôi đã thử: di chuột, và nó có vẻ hoạt động, nhưng nó vẫn giữ nguyên kiểu sau khi tôi bỏ ngón tay ra khỏi nút. Tất cả những quan sát này đều trên iPhone 4 và Droid 2.

Có cách nào để tái tạo hiệu ứng trên các trình duyệt di động (iPhone, iPad, Android và hy vọng là các trình duyệt khác) không? Hiện tại, tôi đang làm một việc như sau:

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

Lớp giả: hoạt động dành cho trình duyệt máy tính để bàn và lớp hiện hoạt dành cho trình duyệt cảm ứng.

Tôi đang tự hỏi liệu có cách nào đơn giản hơn để làm điều đó mà không liên quan đến Javascript hay không.

Question 2

Không có điều gì như :touchtrong thông số kỹ thuật của W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active nên làm việc, tôi sẽ nghĩ.

Thứ tự trên lớp :active/ :hoverpseudo là rất quan trọng để nó hoạt động chính xác.

Đây là một trích dẫn từ liên kết trên

Các tác nhân người dùng tương tác đôi khi thay đổi kết xuất để phản ứng với các hành động của người dùng. CSS cung cấp ba lớp giả cho các trường hợp phổ biến:

Lớp giả: hover áp dụng trong khi người dùng chỉ định một phần tử (với một số thiết bị trỏ), nhưng không kích hoạt nó. Ví dụ: tác nhân người dùng trực quan có thể áp dụng lớp giả này khi con trỏ (con trỏ chuột) di chuột qua một hộp do phần tử tạo ra. Tác nhân người dùng không hỗ trợ phương tiện tương tác không phải hỗ trợ lớp giả này. Một số tác nhân người dùng phù hợp hỗ trợ phương tiện tương tác có thể không hỗ trợ lớp giả này (ví dụ: thiết bị bút).

Lớp giả: hoạt động áp dụng trong khi một phần tử đang được kích hoạt bởi người dùng. Ví dụ, giữa các lần người dùng nhấn và thả chuột.

Lớp giả: tiêu điểm áp dụng trong khi một phần tử có tiêu điểm (chấp nhận các sự kiện bàn phím hoặc các dạng nhập văn bản khác).

Question 3

Vì thiết bị di động không đưa ra phản hồi khi di chuột qua nên với tư cách là người dùng, tôi muốn thấy phản hồi tức thì khi một liên kết được nhấn. Tôi nhận thấy rằng đó -webkit-tap-highlight-colorlà phản hồi nhanh nhất (chủ quan).

Thêm phần sau vào nội dung của bạn và các liên kết của bạn sẽ có hiệu ứng nhấn.

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

Question 4

Tôi gặp sự cố với kiểu nút màn hình cảm ứng trên thiết bị di động. Điều này sẽ khắc phục sự cố di chuột dính / nút hoạt động của bạn.

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>

Mở rộng đoạn mã