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


152

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?



1
Saya menyiasati ini dengan solusi php di mana saya menemukan apakah perangkat yang melihat itu mobile atau tidak dan menggunakan stylesheet yang benar dengan berbagai perubahan berdasarkan itu. Itu tidak menjawab pertanyaan Anda. Anda berpotensi dapat menggunakan kueri @media tetapi itu tidak dijamin akan berfungsi baik saat ponsel dan tablet memiliki resolusi full hd.
TomFirth

Jawaban:


5

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>


181

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/


Terima kasih! Hanya satu komentar: bukankah lebih baik memeriksa dulu jika document.styleSheetsada daripada menggunakan try/catch?
Simon Ferndđ

1
Saya telah menggunakan untuk try/catchberjaga-jaga jika beberapa kesalahan aneh muncul, yang dapat merusak skrip, seperti deleteRule tidak berfungsi karena kebijakan asal yang sama atau dukungan tidak stabil di IE (diedit komentar untuk mencerminkan itu). Tapi ya, dalam banyak kasus, pemeriksaan sederhana saja sudah cukup.
blade

1
Perlu disebutkan bahwa browser desktop termasuk Firefox tidak akan menghasilkan 'notouch'. Mereka melaporkan peristiwa sentuhan pemahaman.
Harry B

3
Solusi ini tidak berfungsi untuk perangkat campuran di mana hover akan bekerja untuk mouse tetapi tidak untuk acara sentuh
nbar

2
@Haneev itu benar untuk sebagian besar kasus, meskipun tidak untuk kasus spesifik Anda. Membuat aturan Anda berfungsi akan menambah banyak kerumitan pada kode, yang akan membuat jawabannya lebih sulit untuk dipahami. Saya akan menyarankan untuk memisahkan aturan atau menggunakan solusi ke-2, yang bagaimanapun lebih kuat. Namun, Anda sangat disambut untuk menyarankan pengeditan, jika Anda dapat meningkatkan solusi pertama tanpa membuatnya terlalu rumit.
pisau

47

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.


Terima kasih, ini akan memudahkan! Namun, saya mencobanya dengan Chrome dalam mode seluler, tetapi tidak berhasil - saat saya "mengetuk", warnanya menjadi biru ...
Simon Ferndđ

1
@SimonFernd Guestrooms Itu hanya batasan dari devtools Chrome. Coba buka tautan di perangkat sentuh yang sebenarnya.
Jason T Featheringham

1
Bekerja dengan sempurna di iPad Chrome / Safari vs. OS X Chrome / Safari. Terima kasih! Akhirnya solusi elegan yang Anda inginkan untuk masalah visual sekecil itu.
rakaloof

3
Saya baru saja mencoba ini di iPhone 6S saya yang sebenarnya menjalankan iOS 11, dan tautannya menjadi biru.
Lukas Petr

1
Juga mencoba ini dengan Nexus 5X yang menjalankan Android 8.1.0 dan Chrome 68.0.3440.91. Tautan menjadi biru.
Trevin Avery

14

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.


Terima kasih @DmitriPavlutin, menurut tabel (ketika dikompilasi) seharusnya, tetapi saya bisa melihat lagi.
ProgrammerPer

@DmitriPavlutin Anda memang benar. Akan memperbarui jawabannya
ProgrammerPer

1
Maksud Anda itu tidak berfungsi di Firefox Desktop jika digunakan dengan perangkat sentuh eksklusif? Ini bekerja dengan baik dengan semua yang saya coba.
FuzzeeLowgeek

@FuzzeeLowgeek Kedengarannya bagus! Terakhir kali saya memeriksanya adalah 2018-08-23, jadi jika Anda dapat memastikan ini dengan pasti, mungkin saya dapat memperbarui jawabannya lagi?
ProgrammerPer

13

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

itu tidak berhasil sama sekali. Anda memiliki hover: none dalam kueri media untuk mixin yang didukung hover? Anda perlu pointer: kasar sesuai jawaban lain di sini.
Allan Nienhuis

Pernahkah Anda mencobanya atau Anda hanya mengatakan itu tidak berhasil karena terlihat aneh? Itu sebabnya saya menulis "Kelihatannya aneh" .. Dan TIDAK berhasil untuk saya tanpa petunjuk: kasar.
Calsal

Saya memiliki beberapa hasil yang tidak konsisten dengan pendekatan CSS untuk ini di OnePlus 5T saya (di Chrome dan Firefix). Ini berfungsi dengan baik di iOS, tetapi saya tidak bisa membuatnya berfungsi di OnePlus. Saya menguji secara menyeluruh menggunakan penunjuk dan sembarang-hover
Zeth

6

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.

  1. (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.

  1. (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.

  2. (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 .


pointer-events- itu luar biasa! Itulah yang saya cari, terima kasih banyak!
Simon Fernd Refriger

1
@SimonFerndđ, semoga bermanfaat untuk kedepannya. Pastikan untuk mengingat peringatan bahwa hingga saat ini, <a>tautan mungkin tidak dapat diakses di bawah pointer-events:none. Dengan sedikit keberuntungan, itu akan berubah nanti - atau CSS 3.x atau 4.0+ akan memiliki pointer-events:navigation-onlyatau serupa.
Jarang 'Where's Monica' Needy

6

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


Ini memang akan menyelesaikan masalah. Saya tidak pernah mendengar ini sebelumnya. Di versi browser apa ini seharusnya berfungsi?
Simon Ferndđ

3
@SimonFerndriger caniuse.com/#feat=css-media-interaction dan beberapa info lebih lanjut: dev.opera.com/articles/media-features
Skeptis

Bagus ... Ini tidak memiliki dukungan browser yang luas.
Giacomo Paita

Itu keren! Terima kasih atas solusi yang mudah digunakan. Saya berharap ini akan ditambahkan ke standar W3C.
GProst

senang saya bisa membantu ^^
Marouen Mhiri

5

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 juga disarankan oleh @blade - namun, menggunakan htmltag alih-alih bodytag mungkin membuatnya sedikit lebih baik untuk dibaca. Itu sebenarnya solusi yang saya gunakan saat ini. Terima kasih.
Simon Ferndđ

1

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

1

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.


0

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

1
Satu masalah sebenarnya adalah itu juga .mousemove () saat mengklik sesuatu di perangkat sentuh.
Lars di upstruct

1
Dan Anda mungkin akan memicu peristiwa ini tanpa henti, sehingga berdampak pada kinerja. Jika ini akan berhasil, daripada Anda sebaiknya menggunakan$('body').one.('mousemove', ...)
Simon Fernd Refriger

0

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

0

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

0

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.


-1

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/


2
Pada tahun 2019 Anda tidak perlu menggunakan jQuery - WebAPI cukup kuat dan mendukung semua fitur utama.
puncak

Ya ... jQuery di 2019? Bagaimana dengan Flash? Hehehe.
remed.io
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.