Cách xóa / bỏ qua: kiểu di chuột css trên thiết bị cảm ứng

Tôi muốn bỏ qua tất cả :hovercác khai báo CSS nếu người dùng truy cập trang web của chúng tôi thông qua thiết bị cảm ứng. Bởi vì :hoverCSS không có ý nghĩa và thậm chí nó có thể bị xáo trộn nếu một máy tính bảng kích hoạt nó khi nhấp / nhấn bởi vì sau đó nó có thể dính cho đến khi phần tử mất tiêu điểm. Thành thật mà nói, tôi không biết tại sao các thiết bị cảm ứng cần phải kích hoạt :hoverngay từ đầu - nhưng đây là thực tế, vì vậy vấn đề này cũng là thực tế.

a:hover {
   color:blue;
   border-color:green;
   // etc. > ignore all at once for touch devices
}

Vì vậy, (làm thế nào) tôi có thể xóa / bỏ qua tất cả các :hoverkhai báo CSS cùng một lúc (mà không cần phải biết từng cái) cho các thiết bị cảm ứng sau khi chúng được khai báo?

tl; dr sử dụng cái này: https://jsfiddle.net/57tmy8j3/

Nếu bạn quan tâm tại sao hoặc có những lựa chọn nào khác, hãy đọc tiếp.

Quick'n'denty - remove: kiểu di chuột bằng cách sử dụng JS

Bạn có thể xóa tất cả các quy tắc CSS có chứa :hoverbằng Javascript. Điều này có lợi thế là không phải chạm CSS và tương thích ngay cả với các trình duyệt cũ hơn.

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

Hạn chế: bảng định kiểu phải được lưu trữ trên cùng một tên miền (điều đó có nghĩa là không có CDN). Vô hiệu hóa dao động trên các thiết bị chuột và cảm ứng hỗn hợp như Surface hoặc iPad Pro, làm tổn thương UX.

Chỉ CSS - sử dụng truy vấn phương tiện

Đặt tất cả: quy tắc di chuột của bạn trong một @mediakhối:

@media (hover: hover) {
  a:hover { color: blue; }
}

hoặc cách khác, ghi đè tất cả các quy tắc di chuột của bạn (tương thích với các trình duyệt cũ hơn):

a:hover { color: blue; }

@media (hover: none) {
  a:hover { color: inherit; }
}

Hạn chế: chỉ hoạt động trên iOS 9.0+, Chrome cho Android hoặc Android 5.0+ khi sử dụng WebView. hover: hoverphá vỡ các hiệu ứng di chuột trên các trình duyệt cũ hơn, hover: nonecần ghi đè tất cả các quy tắc CSS được xác định trước đó. Cả hai đều không tương thích với các thiết bị chuột và cảm ứng hỗn hợp .

Mạnh mẽ nhất - phát hiện cảm ứng thông qua JS và thêm CSS: quy tắc di chuột

Phương pháp này cần chuẩn bị trước tất cả các quy tắc di chuột với body.hasHover. (hoặc tên lớp bạn chọn)

body.hasHover a:hover { color: blue; }

Các hasHoverlớp có thể được thêm vào sử dụng hasTouch()từ ví dụ đầu tiên:

if (!hasTouch()) document.body.className += ' hasHover'

Tuy nhiên, điều này có những nhược điểm tương tự với các thiết bị cảm ứng hỗn hợp như các ví dụ trước, điều này đưa chúng ta đến giải pháp tối ưu. Bật hiệu ứng di chuột bất cứ khi nào con trỏ chuột được di chuyển, vô hiệu hóa hiệu ứng di chuột bất cứ khi nào phát hiện thấy cảm ứng.

function watchForHover() {
  // lastTouchTime is used for ignoring emulated mousemove events
  let lastTouchTime = 0

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return
    document.body.classList.add('hasHover')
  }

  function disableHover() {
    document.body.classList.remove('hasHover')
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)

  enableHover()
}

watchForHover()

Điều này sẽ hoạt động cơ bản trong bất kỳ trình duyệt nào và cho phép / vô hiệu hóa các kiểu di chuột khi cần thiết.

Dưới đây là ví dụ đầy đủ - hiện đại: https://jsfiddle.net/57tmy8j3/
Legacy (để sử dụng với các trình duyệt cũ): https://jsfiddle.net/dkz17jc5/19/

Con trỏ thích ứng để giải cứu!

Vì điều này chưa được chạm vào trong một lúc, bạn có thể sử dụng:

a:link {
   color: red;
}

a:hover {
   color:blue;
}

@media (hover: none) {
   a:link {
      color: red;
   }
}

Xem bản demo này trong cả trình duyệt máy tính để bàn và trình duyệt điện thoại của bạn . Được hỗ trợ bởi các thiết bị cảm ứng hiện đại .

Lưu ý : Hãy nhớ rằng vì đầu vào chính (khả năng) của Surface PC là chuột, nên cuối cùng nó sẽ là một liên kết màu xanh, ngay cả khi đó là màn hình (máy tính bảng) tách rời. Các trình duyệt sẽ (nên) luôn luôn mặc định với khả năng đầu vào chính xác nhất.

Tôi đã gặp phải vấn đề tương tự (trong trường hợp của tôi với các trình duyệt di động của Samsung) và do đó tôi vấp phải câu hỏi này.

Nhờ câu trả lời của Calsal, tôi đã tìm thấy thứ gì đó mà tôi tin rằng sẽ loại trừ hầu như tất cả các trình duyệt trên máy tính để bàn vì dường như nó được nhận ra bởi các trình duyệt di động mà tôi đã thử (xem ảnh chụp màn hình từ bảng đã biên dịch: bảng phát hiện tính năng con trỏ CSS ).

Tài liệu web MDN nói rằng

Tính năng CSS @media của con trỏ có thể được sử dụng để áp dụng các kiểu dựa trên việc cơ chế nhập liệu chính của người dùng có phải là thiết bị trỏ hay không và nếu có thì độ chính xác của nó là bao nhiêu

.

Những gì tôi phát hiện ra là con trỏ: thô là thứ mà tất cả các trình duyệt máy tính để bàn trong bảng đính kèm nhưng được biết đến với tất cả các trình duyệt di động trong cùng một bảng. Đây có vẻ là sự lựa chọn hiệu quả nhất vì tất cả các giá trị từ khóa con trỏ khác cho kết quả không nhất quán.

Do đó, bạn có thể tạo một truy vấn phương tiện như Calsal được mô tả nhưng được sửa đổi một chút. Nó sử dụng logic đảo ngược để loại trừ tất cả các thiết bị cảm ứng.

Sass mixin:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

Biên dịch CSS:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

Nó cũng được mô tả trong ý chính này mà tôi đã tạo ra sau khi nghiên cứu vấn đề. Codepen cho nghiên cứu thực nghiệm.

CẬP NHẬT : Khi viết bản cập nhật này, 2018-08-23 và được chỉ ra bởi @DmitriPavlutin, kỹ thuật này dường như không còn hoạt động với máy tính để bàn Firefox.

Theo câu trả lời của Jason, chúng tôi chỉ có thể giải quyết các thiết bị không hỗ trợ di chuột với các truy vấn phương tiện css thuần túy. Chúng tôi cũng chỉ có thể giải quyết các thiết bị hỗ trợ di chuột, như câu trả lời của moogal trong một câu hỏi tương tự @media not all and (hover: none). Có vẻ lạ nhưng nó hoạt động.

Tôi đã tạo một Sass mixin từ đây để dễ sử dụng hơn:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

Cập nhật 2019-05-15 : Tôi đề xuất bài viết này từ Phương tiện đi qua tất cả các thiết bị khác nhau mà chúng tôi có thể nhắm mục tiêu bằng CSS. Về cơ bản, đó là sự pha trộn của các quy tắc truyền thông này, kết hợp chúng cho các mục tiêu cụ thể:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

Ví dụ cho các mục tiêu cụ thể:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

Tôi yêu mixins, đây là cách tôi sử dụng mixin di chuột của mình để chỉ nhắm mục tiêu các thiết bị hỗ trợ nó:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

Tôi đang đối phó với một vấn đề tương tự hiện nay.

Có hai tùy chọn chính xảy ra với tôi ngay lập tức: (1) kiểm tra chuỗi người dùng hoặc (2) duy trì các trang di động riêng biệt bằng một URL khác và yêu cầu người dùng chọn những gì tốt hơn cho họ.

1. Nếu bạn có thể sử dụng ngôn ngữ băng từ internet như PHP hoặc Ruby, bạn có thể kiểm tra chuỗi người dùng của thiết bị yêu cầu một trang và chỉ cần cung cấp cùng một nội dung nhưng <link rel="mobile.css" />thay vì kiểu thông thường.

Chuỗi người dùng có thông tin nhận dạng về trình duyệt, trình kết xuất, hệ điều hành, v.v. Bạn phải quyết định thiết bị nào "chạm" so với không chạm. Bạn có thể tìm thấy thông tin này có sẵn ở đâu đó và ánh xạ nó vào hệ thống của bạn.

A. Nếu bạn được phép bỏ qua các trình duyệt cũ , bạn chỉ cần thêm một quy tắc duy nhất vào css thông thường, không dành cho thiết bị di động, cụ thể là: EDIT : Erk. Sau khi thực hiện một số thử nghiệm, tôi phát hiện ra quy tắc dưới đây cũng vô hiệu hóa khả năng theo các liên kết trong trình duyệt webkit ngoài việc gây ra hiệu ứng thẩm mỹ bị vô hiệu hóa - xem http://jsfiddle.net/3nkcdeao/
Như vậy, bạn sẽ có để chọn lọc hơn một chút về cách bạn sửa đổi các quy tắc cho trường hợp di động so với những gì tôi trình bày ở đây, nhưng nó có thể là điểm khởi đầu hữu ích:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

Là một sidenote, vô hiệu hóa các sự kiện con trỏ trên cha mẹ và sau đó cho phép rõ ràng chúng trên một đứa trẻ hiện gây ra bất kỳ hiệu ứng di chuột nào trên cha mẹ để hoạt động trở lại nếu một phần tử con xâm nhập :hover.
Xem http://jsfiddle.net/38Lookhp/5/

B. Nếu bạn đang hỗ trợ các trình kết xuất web cũ, bạn sẽ phải thực hiện thêm một chút công việc để loại bỏ bất kỳ quy tắc nào đặt các kiểu đặc biệt trong suốt :hover. Để tiết kiệm thời gian cho mọi người, bạn có thể chỉ muốn xây dựng một lệnh sao chép tự động + sed ing mà bạn chạy trên các biểu định kiểu chuẩn của mình để tạo các phiên bản di động. Điều đó sẽ cho phép bạn chỉ cần viết / cập nhật mã tiêu chuẩn và loại bỏ mọi quy tắc kiểu sử dụng :hovercho phiên bản di động của các trang của bạn.

2. (I) Ngoài ra, chỉ cần làm cho người dùng của bạn biết rằng bạn có m.website.com cho thiết bị di động ngoài trang web.com của bạn . Mặc dù tên miền phụ là cách phổ biến nhất, bạn cũng có thể có một số sửa đổi có thể dự đoán khác của một URL nhất định để cho phép người dùng di động truy cập vào các trang đã sửa đổi. Ở giai đoạn đó, bạn sẽ muốn chắc chắn rằng họ không phải sửa đổi URL mỗi khi họ điều hướng đến một phần khác của trang web.

Một lần nữa ở đây, bạn có thể chỉ cần thêm một hoặc hai quy tắc bổ sung vào các bảng định kiểu hoặc bị buộc phải làm một cái gì đó phức tạp hơn một chút bằng cách sử dụng sed hoặc một tiện ích tương tự. Có lẽ dễ áp ​​dụng nhất: không áp dụng cho các quy tắc tạo kiểu của bạn như div:not(.disruptive):hover {...trong đó bạn sẽ thêm class="disruptive"vào các yếu tố gây phiền toái cho người dùng di động bằng js hoặc ngôn ngữ máy chủ, thay vì sử dụng CSS.

2. (II) Bạn thực sự có thể kết hợp hai cái đầu tiên và (nếu bạn nghi ngờ người dùng đã chuyển sang phiên bản sai của trang), bạn có thể đề nghị họ chuyển sang / ra khỏi màn hình loại di động hoặc chỉ cần có một liên kết ở đâu đó cho phép người dùng lật qua lại. Như đã nêu, các truy vấn @media cũng có thể là thứ cần sử dụng để xác định những gì đang được sử dụng để truy cập.

3. (III) Nếu bạn đang tìm giải pháp jQuery một khi bạn biết thiết bị nào "chạm" và thiết bị nào không, bạn có thể thấy CSS hover không bị bỏ qua trên các thiết bị màn hình cảm ứng hữu ích.

thử cái này:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

CẬP NHẬT: không may W3C đã xóa thuộc tính này khỏi thông số kỹ thuật ( https://github.com/w3c/csswg-dcraft/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).

Bạn có thể sử dụng Modernizr JS (xem thêm câu trả lời StackOverflow này ) hoặc tạo một hàm JS tùy chỉnh:

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch');
} else {
  $('html').addClass('no-touch');
} 

để phát hiện sự hỗ trợ của sự kiện cảm ứng trong trình duyệt và sau đó gán một thuộc tính thông thường CSS, duyệt qua phần tử với html.no-touchlớp, như sau:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

Nó rất hữu ích cho tôi: link

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}

Đây cũng là một cách giải quyết có thể, nhưng bạn sẽ phải thông qua css của mình và thêm một .no-touch lớp trước các kiểu di chuột của bạn.

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

Ví dụ CSS:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

Nguồn

Ps Nhưng chúng ta nên nhớ rằng, ngày càng có nhiều thiết bị cảm ứng xuất hiện trên thị trường, cũng đồng thời hỗ trợ đầu vào chuột.

Đây có thể chưa phải là một giải pháp hoàn hảo (và với jQuery) nhưng có lẽ đó là một hướng / khái niệm để thực hiện: còn việc thực hiện theo cách khác thì sao? Có nghĩa là tắt các trạng thái: hover css theo mặc định và kích hoạt chúng nếu phát hiện sự kiện mousemove ở bất kỳ đâu trên tài liệu. Tất nhiên điều này không hoạt động nếu ai đó tắt js. Những gì khác có thể nói chống lại làm theo cách này vòng?

Có lẽ như thế này:

CSS:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

Hãy thử điều này (tôi sử dụng màu nền và màu nền trong ví dụ này):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Cách bẩn thỉu ... Không thanh lịch, nhưng cách dễ nhất có thể cứu bạn.

Loại bỏ bất cứ thứ gì đặc trưng cho di chuột.

.your-class:hover:before {
  color: blue;
  background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}

@media all and (min-width:320px) and (max-width: 960px) {
    .your-class:hover:before {
    color: black;
    background: transparent;
  }
}

Nếu vấn đề của bạn là khi bạn chạm / chạm vào Android và toàn bộ div được bao phủ bởi màu xanh trong suốt! Sau đó, bạn chỉ cần thay đổi

HIỆN TẠI: ĐIỂM; đến HIỆN TẠI: DEFAULT;

sử dụng mediaQuery để ẩn trong điện thoại di động / Máy tính bảng.

Điều này làm việc cho tôi.

Hãy thử giải pháp jquery 2019 dễ dàng này, mặc dù nó đã được một thời gian;

1. thêm plugin này vào đầu:

   src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

2. thêm cái này vào js:

   $ ("*"). on ("touchend", function (e) {$ (this) .f Focus ();}); // áp dụng cho tất cả các yếu tố

3. Một số biến thể được đề xuất cho điều này là:

   $ (": input ,: hộp kiểm,"). on ("touchend", function (e) {(this) .f Focus);}); // chỉ định các phần tử

   $ ("*"). on ("click, touchend", function (e) {$ (this) .f Focus ();}); // bao gồm sự kiện click

   css: body {con trỏ: con trỏ; } // chạm vào bất cứ đâu để kết thúc một tiêu điểm

Ghi chú

• đặt plugin trước bootstrap.js để tránh ảnh hưởng đến chú giải công cụ
• chỉ được thử nghiệm trên iphone XR ios 12.1.12 và ipad 3 ios 9.3.5, sử dụng Safari hoặc Chrome.

Người giới thiệu:

https://code.jquery.com/ui/

https://api.jquery.com/carget/selector/jquery-selector-extensions/