Cara menghapus / mengabaikan: arahkan kursor ke gaya css di perangkat sentuh

Saya ingin mengabaikan semua :hoverdeklarasi CSS jika pengguna mengunjungi situs web kami melalui perangkat sentuh. Karena :hoverCSS tidak masuk akal, dan bahkan dapat mengganggu jika tablet memicunya saat diklik / diketuk karena mungkin akan menempel sampai elemen kehilangan fokus. Sejujurnya, saya tidak tahu mengapa perangkat sentuh merasa perlu untuk memicu :hoversejak awal - tetapi ini adalah kenyataan, jadi masalah ini adalah kenyataan juga.

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

Jadi, (bagaimana) saya dapat menghapus / mengabaikan semua :hoverdeklarasi CSS sekaligus (tanpa harus mengetahui masing-masing) untuk perangkat sentuh setelah mendeklarasikannya?

Solusi 2020 - Hanya CSS - Tanpa Javascript

Gunakan media hover dengan media pointer akan membantu kalian menyelesaikan masalah ini. Diuji di web chrome dan seluler android. Saya tahu pertanyaan lama ini tetapi saya tidak menemukan solusi seperti ini.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

tl; dr gunakan ini: https://jsfiddle.net/57tmy8j3/

Jika Anda tertarik mengapa atau apa pilihan lain yang ada, baca terus.

Quick'n'dirty - hapus: gaya hover menggunakan JS

Anda dapat menghapus semua aturan CSS yang mengandung :hovermenggunakan Javascript. Ini memiliki keuntungan karena tidak harus menyentuh CSS dan kompatibel bahkan dengan browser lama.

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) {}
}

Batasan: stylesheet harus dihosting di domain yang sama (artinya tidak ada CDN). Menonaktifkan hover pada perangkat mouse & sentuh campuran seperti Surface atau iPad Pro, yang mengganggu UX.

Hanya CSS - gunakan kueri media

Tempatkan semua aturan Anda: hover dalam satu @mediablok:

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

atau sebagai alternatif, timpa semua aturan hover Anda (kompatibel dengan browser lama):

a:hover { color: blue; }

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

Batasan: hanya berfungsi di iOS 9.0+, Chrome untuk Android, atau Android 5.0+ saat menggunakan WebView. hover: hovermenghentikan efek hover pada browser lama, hover: noneperlu mengganti semua aturan CSS yang telah ditentukan sebelumnya. Keduanya tidak kompatibel dengan perangkat mouse & sentuh campuran .

Yang paling kuat - deteksi sentuhan melalui JS dan tambahkan CSS: aturan hover

Metode ini perlu mempersiapkan semua aturan hover dengan body.hasHover. (atau nama kelas pilihan Anda)

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

The hasHoverkelas dapat ditambahkan dengan menggunakan hasTouch()dari contoh pertama:

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

Namun, hal ini memiliki kelemahan yang sama dengan perangkat sentuh campuran seperti contoh sebelumnya, yang membawa kita ke solusi pamungkas. Aktifkan efek hover setiap kali kursor mouse digerakkan, nonaktifkan efek hover setiap kali ada sentuhan yang terdeteksi.

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

Ini pada dasarnya harus berfungsi di browser apa pun dan mengaktifkan / menonaktifkan gaya hover sesuai kebutuhan.

Berikut contoh lengkapnya - modern: https://jsfiddle.net/57tmy8j3/
Legacy (untuk digunakan dengan browser lama): https://jsfiddle.net/dkz17jc5/19/

Adaptasi penunjuk untuk penyelamatan!

Karena ini sudah lama tidak disentuh, Anda dapat menggunakan:

a:link, a:visited {
   color: red;
}

a:hover {
   color:blue;
}

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

Lihat demo ini di browser desktop dan browser ponsel Anda . Didukung oleh perangkat sentuh modern .

Catatan : Perlu diingat bahwa karena input utama Surface PC (kapabilitas) adalah mouse, itu akan menjadi link biru, bahkan jika itu layar (tablet) yang terpisah. Browser akan (harus) selalu menggunakan kemampuan input yang paling tepat.

Saya mengalami masalah yang sama (dalam kasus saya dengan browser seluler Samsung) dan oleh karena itu saya menemukan pertanyaan ini.

Berkat jawaban Calsal, saya menemukan sesuatu yang saya percaya akan mengecualikan hampir semua browser desktop karena tampaknya dikenali oleh browser seluler yang saya coba (lihat tangkapan layar dari tabel yang dikompilasi: tabel deteksi fitur penunjuk CSS ).

Dokumen web MDN menyatakan bahwa

Fitur pointer CSS @media dapat digunakan untuk menerapkan gaya berdasarkan apakah mekanisme input utama pengguna adalah perangkat penunjuk, dan jika demikian, seberapa akuratnya

.

Apa yang saya temukan adalah penunjuk itu: kasar adalah sesuatu yang tidak diketahui oleh semua browser desktop dalam tabel terlampir tetapi diketahui oleh semua browser seluler dalam tabel yang sama. Ini tampaknya menjadi pilihan yang paling efektif karena semua nilai kata kunci penunjuk lainnya memberikan hasil yang tidak konsisten.

Karenanya, Anda dapat membuat kueri media seperti yang dijelaskan Calsal tetapi sedikit dimodifikasi. Itu menggunakan logika terbalik untuk mengesampingkan semua perangkat sentuh.

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

CSS yang dikompilasi:

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

Itu juga dijelaskan dalam inti yang saya buat setelah meneliti masalah. Codepen untuk penelitian empiris.

PEMBARUAN : Saat menulis pembaruan ini, 23-08-2018, dan ditunjukkan oleh @DmitriPavlutin, teknik ini tampaknya tidak lagi berfungsi dengan desktop Firefox.

Menurut jawaban Jason, kami hanya dapat menangani perangkat yang tidak mendukung hover dengan kueri media css murni. Kami juga dapat menangani perangkat yang mendukung hover saja, seperti jawaban moogal dalam pertanyaan serupa, dengan @media not all and (hover: none). Ini terlihat aneh tapi berhasil.

Saya membuat campuran Sass dari ini agar lebih mudah digunakan:

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

Pembaruan 2019-05-15 : Saya merekomendasikan artikel ini dari Medium yang membahas semua perangkat berbeda yang dapat kami targetkan dengan CSS. Pada dasarnya ini adalah campuran dari aturan media ini, menggabungkannya untuk target tertentu:

@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 */
}

Contoh untuk target spesifik:

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

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

Saya suka mixin, beginilah cara saya menggunakan hover mixin saya hanya untuk menargetkan perangkat yang mendukungnya:

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

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

Saya sedang menghadapi masalah serupa saat ini.

Ada dua opsi utama yang langsung muncul di benak saya: (1) pemeriksaan string pengguna, atau (2) mempertahankan laman seluler terpisah menggunakan URL yang berbeda dan meminta pengguna memilih apa yang lebih baik untuk mereka.

1. Jika Anda dapat menggunakan bahasa lakban internet seperti PHP atau Ruby, Anda dapat memeriksa string pengguna perangkat yang meminta halaman, dan hanya menyajikan konten yang sama tetapi dengan <link rel="mobile.css" />gaya yang tidak normal.

String pengguna memiliki informasi pengenal tentang browser, perender, sistem operasi, dll. Terserah Anda untuk memutuskan perangkat apa yang "sentuh" ​​versus non-sentuh. Anda mungkin dapat menemukan informasi ini tersedia di suatu tempat dan memetakannya ke dalam sistem Anda.

A. Jika Anda diizinkan untuk mengabaikan browser lama , Anda hanya perlu menambahkan satu aturan ke css non-seluler normal, yaitu: EDIT : Erk. Setelah melakukan beberapa percobaan, saya menemukan aturan di bawah ini juga menonaktifkan kemampuan untuk mengikuti tautan di browser webkit selain hanya menyebabkan efek estetika dinonaktifkan - lihat http://jsfiddle.net/3nkcdeao/
Dengan demikian, Anda akan memiliki menjadi sedikit lebih selektif tentang cara Anda mengubah aturan untuk casing seluler daripada yang saya tunjukkan di sini, tetapi ini mungkin titik awal yang membantu:

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

Sebagai sidenote, menonaktifkan peristiwa penunjuk pada induk dan kemudian secara eksplisit mengaktifkannya pada anak saat ini menyebabkan efek hover apa pun pada induk menjadi aktif kembali jika elemen anak masuk :hover.
Lihat http://jsfiddle.net/38Lookhp/5/

B. Jika Anda mendukung perender web lama, Anda harus melakukan sedikit lebih banyak pekerjaan untuk menghapus aturan apa pun yang menyetel gaya khusus selama :hover. Untuk menghemat waktu setiap orang, Anda mungkin hanya ingin membuat perintah penyalinan + sed ing otomatis yang Anda jalankan di lembar gaya standar untuk membuat versi seluler. Itu akan memungkinkan Anda untuk menulis / memperbarui kode standar dan menghapus semua aturan gaya yang digunakan :hoveruntuk versi seluler laman Anda.

2. (I) Cara lainnya, cukup beri tahukan pengguna Anda bahwa Anda memiliki m.website.com untuk perangkat seluler selain website.com Anda . Meskipun subdomain adalah cara yang paling umum, Anda juga dapat memiliki beberapa modifikasi lain yang dapat diprediksi dari URL tertentu untuk memungkinkan pengguna seluler mengakses halaman yang dimodifikasi. Pada tahap itu, Anda ingin memastikan mereka tidak perlu mengubah URL setiap kali mereka menavigasi ke bagian lain dari situs.

Sekali lagi di sini, Anda mungkin dapat menambahkan satu atau dua aturan tambahan ke stylesheet atau dipaksa untuk melakukan sesuatu yang sedikit lebih rumit menggunakan sed atau utilitas serupa. Mungkin akan paling mudah untuk diterapkan: tidak pada aturan gaya Anda seperti di div:not(.disruptive):hover {...mana Anda akan menambahkan class="disruptive"elemen yang melakukan hal-hal yang mengganggu untuk pengguna seluler yang menggunakan js atau bahasa server, alih-alih mengurangi CSS.

2. (II) Anda benar-benar dapat menggabungkan dua yang pertama dan (jika Anda mencurigai pengguna telah mengembara ke versi halaman yang salah) Anda dapat menyarankan agar mereka beralih ke / keluar dari tampilan tipe seluler, atau cukup memiliki tautan di suatu tempat yang memungkinkan pengguna gagal maju mundur. Seperti yang telah dinyatakan, kueri @media mungkin juga sesuatu yang dapat digunakan untuk menentukan apa yang biasa dikunjungi.

3. (III) Jika Anda siap untuk solusi jQuery setelah Anda tahu perangkat apa yang "disentuh" ​​dan mana yang tidak, Anda mungkin menemukan CSS hover tidak diabaikan pada perangkat layar sentuh .

coba ini:

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

PEMBARUAN: sayangnya W3C telah menghapus properti ini dari spesifikasi ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).

Anda dapat menggunakan Modernizr JS (lihat juga jawaban StackOverflow ini ), atau membuat fungsi JS kustom:

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');
} 

untuk mendeteksi dukungan acara sentuh di browser, dan kemudian menetapkan CSSproperti biasa , melintasi elemen dengan html.no-touchkelas, seperti ini:

html.touch a {
    width: 480px;
}

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

Itu membantu saya: tautan

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");
                    }
                }
            }
        }
    }
}

Ini juga merupakan solusi yang mungkin, tetapi Anda harus melalui css Anda dan menambahkan .no-touchkelas sebelum gaya hover Anda.

Javascript:

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

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

Sumber

Ps Tapi kita harus ingat, ada semakin banyak perangkat sentuh ke pasar, yang juga mendukung input mouse pada saat yang bersamaan.

Ini mungkin belum menjadi solusi yang sempurna (dan dengan jQuery) tetapi mungkin ini adalah arah / konsep untuk dikerjakan: bagaimana dengan melakukannya dengan cara lain? Yang berarti menonaktifkan: hover status css secara default dan aktifkan jika peristiwa mousemove terdeteksi di mana saja pada dokumen. Tentu saja ini tidak berhasil jika seseorang menonaktifkan js. Apa lagi yang mungkin menentang melakukannya dengan cara ini?

Mungkin seperti ini:

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");
});

Coba ini (saya menggunakan background dan background-color dalam contoh ini):

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

Cara kotor ... Bukan elegan, tapi cara termudah yang bisa menyelamatkan Anda.

Hapus apa pun yang menjadi ciri hover.

.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;
  }
}

Jika masalah Anda adalah saat Anda menyentuh / mengetuk android dan seluruh div ditutupi oleh warna transparan biru! Maka Anda hanya perlu mengubah file

KURSOR: POINTER; menjadi CURSOR: DEFAULT;

gunakan mediaQuery untuk bersembunyi di ponsel / Tablet.

Ini berhasil untuk saya.

Coba solusi jquery 2019 yang mudah ini, meskipun sudah ada cukup lama;

1. tambahkan plugin ini ke head:

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

2. tambahkan ini ke js:

   $ ("*"). on ("touchend", function (e) {$ (this) .focus ();}); // berlaku untuk semua elemen

3. beberapa variasi yang disarankan untuk ini adalah:

   $ (": input,: checkbox,"). on ("touchend", function (e) {(this) .focus);}); // tentukan elemen

   $ ("*"). di ("click, touchend", function (e) {$ (this) .focus ();}); // sertakan acara klik

   css: body {cursor: pointer; } // sentuh di mana saja untuk mengakhiri fokus

Catatan

• tempatkan plugin sebelum bootstrap.js untuk menghindari pengaruh tooltips
• hanya diuji di iphone XR ios 12.1.12, dan ipad 3 ios 9.3.5, menggunakan Safari atau Chrome.

Referensi:

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

https://api.jquery.com/category/selectors/jquery-selector-extensions/