Thay đổi: di chuột để chạm / nhấp cho thiết bị di động

Question 1

Tôi đã xem xét xung quanh nhưng không thể tìm thấy những gì tôi đang tìm kiếm.

Tôi hiện có hoạt ảnh css trên trang của mình được kích hoạt bởi: hover. Tôi muốn điều này thay đổi thành 'nhấp' hoặc 'chạm' khi trang được thay đổi kích thước qua chiều rộng 700px bằng cách sử dụng truy vấn phương tiện.

Đây là những gì tôi có vào lúc này: http://jsfiddle.net/danieljoseph/3p6Kz/

Như bạn có thể thấy,: hover sẽ không hoạt động trên thiết bị di động nhưng tôi vẫn muốn đảm bảo nó hoạt động theo cùng một cách chỉ bằng cách nhấp chuột chứ không phải di chuột.

Tôi muốn sử dụng css nếu có thể nhưng cũng hài lòng với JQuery.

Tôi có cảm giác điều này rất dễ thực hiện nhưng tôi chỉ thiếu một điều rất rõ ràng! Bất kỳ trợ giúp sẽ được đánh giá cao.

Đây là hoạt ảnh css:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Question 2

Nếu bạn sử dụng: bộ chọn hoạt động kết hợp với: di chuột, bạn có thể đạt được điều này theo w3schools miễn là: bộ chọn hoạt động được gọi sau: bộ chọn di chuột.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

Bạn sẽ phải kiểm tra FIDDLE trong môi trường di động. Tôi không thể vào lúc này.
sửa - Tôi vừa thử nghiệm trên thiết bị di động, nó hoạt động tốt

Question 3

Bạn có thể thêm onclick="" vào phần tử di chuột. Hover sẽ hoạt động sau đó.

Chỉnh sửa: Nhưng bạn thực sự không nên thêm bất kỳ phong cách nào liên quan đến đánh dấu của mình, chỉ cần đăng nó như một sự thay thế.

Question 4

Tôi cũng gặp sự cố tương tự, trên thiết bị di động có trình duyệt Edge của Microsoft. Tôi có thể giải quyết vấn đề với: aria-haspopup="true". Nó cần phải thêm vào các div và :hover, :active, :focuscho các trình duyệt di động khác.

Html mẫu:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Question 5

document.addEventListener("touchstart", function() {}, true);

Đoạn mã này sẽ kích hoạt hiệu ứng di chuột cho màn hình cảm ứng

Question 6

Tôi là một noob CSS nhưng tôi nhận thấy rằng di chuột sẽ hoạt động cho màn hình cảm ứng miễn là nó là một phần tử "có thể di chuyển": hình ảnh, liên kết, nút. Bạn có thể làm tất cả với CSS bằng thủ thuật sau.

Thay đổi nền div của bạn thành một thẻ hình ảnh thực tế trong div hoặc tạo một liên kết giả xung quanh toàn bộ div, sau đó nó sẽ đăng ký dưới dạng di chuột khi bạn chạm vào hình ảnh.

Làm điều này có nghĩa là bạn cần phần còn lại của trang cũng "có thể lưu được" để khi bạn chạm vào bên ngoài hình ảnh, nó sẽ nhận ra rằng info-slide: hover đã kết thúc. Mẹo của tôi là làm cho tất cả các liên kết giả nội dung khác của tôi.

Nó không phải là rất thanh lịch nhưng nó hoạt động.

Question 7

Trên hầu hết các thiết bị, các câu trả lời khác hoạt động. Đối với tôi, để đảm bảo nó hoạt động trên tất cả các thiết bị (trong phản ứng) Tôi đã phải bọc nó trong một thẻ neo <a>và thêm những điều sau đây: :hover, :focus, :active(theo thứ tự đó), cũng như role="button"và tabIndex="0".

Question 8

Tôi nghĩ rằng phương pháp đơn giản này có thể đạt được mục tiêu này. Với CSS, bạn có thể tắt sự kiện con trỏ thành 'none', sau đó sử dụng jQuery để chuyển đổi các lớp.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Mở rộng đoạn mã

Sử dụng jQuery để chuyển đổi lớp:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

Mở rộng đoạn mã

Question 9

Tôi đồng ý với các câu trả lời ở trên nhưng vẫn có một cách khác để làm điều này và đó là sử dụng media các truy vấn.

Giả sử đây là những gì bạn muốn làm:

body.nontouch nav a:hover {
    background: yellow;
}

thì bạn có thể thực hiện việc này bằng truy vấn phương tiện như:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Và để biết thêm chi tiết bạn có thể truy cập này trang.

Question 10

Một giải pháp CSS chỉ dành cho những người gặp khó khăn 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ã