Jak usunąć / zignorować: najedź na styl css na urządzeniach dotykowych

141

Chcę zignorować wszystkie :hoverdeklaracje CSS, jeśli użytkownik odwiedza naszą witrynę za pomocą urządzenia dotykowego. Ponieważ :hoverCSS nie ma sensu, a nawet może przeszkadzać, jeśli tablet uruchamia go po kliknięciu / dotknięciu, ponieważ wtedy może się trzymać, dopóki element nie straci ostrości. Szczerze mówiąc, nie wiem, dlaczego urządzenia dotykowe czują potrzebę wyzwalania :hoverna pierwszym miejscu - ale taka jest rzeczywistość, więc ten problem też jest rzeczywistością.

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

Więc (jak) mogę usunąć / zignorować wszystkie :hoverdeklaracje CSS naraz (bez konieczności znajomości każdej) dla urządzeń dotykowych po ich zadeklarowaniu?

Simon Fernderer
źródło
Jest to podobne do tego, jak zapobiegać efektom lepkiego najechania na przyciski na urządzeniach dotykowych - jednak bardziej ogólnie
Simon Fernderer,
1
Obchodzę to za pomocą rozwiązania php, w którym odkrywam, czy urządzenie do przeglądania jest mobilne, czy nie i używam prawidłowego arkusza stylów z różnymi zmianami na tej podstawie. To jednak nie odpowiada na twoje pytanie. Możesz potencjalnie używać zapytań @media, ale nie gwarantuje to działania, gdy telefony i tablety mają rozdzielczość full hd.
TomFirth

Odpowiedzi:

171

tl; dr użyj tego: https://jsfiddle.net/57tmy8j3/

Jeśli interesuje Cię dlaczego lub jakie są inne opcje, czytaj dalej.

Quick'n'dirty - usuń: najedź stylami za pomocą JS

Możesz usunąć wszystkie reguły CSS zawierające :hoverza pomocą Javascript. Ma to tę zaletę, że nie trzeba dotykać CSS i jest kompatybilne nawet ze starszymi przeglądarkami.

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

Ograniczenia: arkusze stylów muszą znajdować się w tej samej domenie (co oznacza brak sieci CDN). Wyłącza kursory na mieszanych urządzeniach myszy i dotykowych, takich jak Surface lub iPad Pro, co szkodzi UX.

Tylko CSS - używaj zapytań o media

Umieść wszystkie swoje reguły: najechanie kursorem w @mediabloku:

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

lub alternatywnie, zastąp wszystkie reguły najechania kursorem (zgodne ze starszymi przeglądarkami):

a:hover { color: blue; }

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

Ograniczenia: działa tylko na iOS 9.0+, Chrome na Androida lub Android 5.0+ podczas korzystania z WebView. hover: hoverprzerywa efekty najechania na starsze przeglądarki, hover: nonewymaga zastąpienia wszystkich wcześniej zdefiniowanych reguł CSS. Oba są niekompatybilne z mieszanymi urządzeniami myszą i dotykową .

Najbardziej niezawodny - wykrywaj dotyk za pomocą JS i dołącz CSS: reguły najechania kursorem

Ta metoda wymaga poprzedzenia wszystkich reguł dymka body.hasHover. (lub dowolna nazwa klasy)

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

hasHoverKlasy mogą być dodane za pomocą hasTouch()od pierwszego np

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

Jednak miałoby to takie same wady w przypadku mieszanych urządzeń dotykowych, jak w poprzednich przykładach, co prowadzi nas do ostatecznego rozwiązania. Włącz efekty najechania po każdym przesunięciu kursora myszy, wyłącz efekty najechania po wykryciu dotyku.

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

Powinno to działać w zasadzie w każdej przeglądarce i włączać / wyłączać style najechania w razie potrzeby.

Oto pełny przykład - nowoczesny: https://jsfiddle.net/57tmy8j3/
Legacy (do użytku ze starymi przeglądarkami): https://jsfiddle.net/dkz17jc5/19/

nóż
źródło
Dziękuję Ci! Tylko jeden komentarz: czy nie byłoby lepiej najpierw sprawdzić, czy document.styleSheetsistnieje, zamiast używać try/catch?
Simon Fernderer
1
Użyłem try/catchna wypadek, gdyby pojawił się jakiś dziwny błąd, który mógł spowodować awarię skryptu, na przykład niedziałający mechanizm deleteRule z powodu polityki tego samego pochodzenia lub niestabilnej obsługi IE (zmodyfikowano komentarz, aby to odzwierciedlić). Ale tak, w większości przypadków wystarczy zwykła kontrola.
ostrze
1
Warto wspomnieć, że przeglądarki komputerowe, w tym Firefox, nie będą powodować „notouch”. Zgłaszają rozumienie zdarzeń dotykowych.
Harry B
3
To rozwiązanie nie działa na urządzeniach mieszanych, w których najechanie powinno działać dla myszy, ale nie dla zdarzeń dotykowych
nbar
2
@Haneev, jest to poprawne w większości przypadków, chociaż nie w twoim konkretnym. Sprawienie, aby Twoja reguła działała, spowodowałoby dużą złożoność kodu, co utrudniłoby zrozumienie odpowiedzi. Sugerowałbym albo podzielenie zasad, albo użycie drugiego rozwiązania, które i tak jest solidniejsze. Możesz jednak zasugerować zmianę, jeśli możesz ulepszyć pierwsze rozwiązanie, nie komplikując go zbytnio.
ostrze
43

Adaptacja wskaźnika na ratunek!

Ponieważ nie było to dotykane od jakiegoś czasu, możesz użyć:

a:link {
   color: red;
}

a:hover {
   color:blue;
}

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

Obejrzyj to demo w przeglądarce na komputerze i telefonie . Obsługiwane przez nowoczesne urządzenia dotykowe .

Uwaga : należy pamiętać, że ponieważ podstawowym wejściem (funkcją) komputera Surface PC jest mysz, w końcu będzie to niebieskie łącze, nawet jeśli jest to ekran odłączony (tablet). Przeglądarki zawsze będą (powinny) domyślnie wybierać najdokładniejsze możliwości wprowadzania danych.

Jason T. Featheringham
źródło
Dzięki, to byłoby wygodne! Jednak wypróbowałem to z Chrome w trybie mobilnym, ale nie wyszło - kiedy go „stuknąłem”, i tak
zrobiło
1
@SimonFerndothes To tylko ograniczenie narzędzi deweloperskich Chrome. Spróbuj otworzyć link na rzeczywistym urządzeniu dotykowym.
Jason T Featheringham
1
Działa idealnie na iPad Chrome / Safari vs. OS X Chrome / Safari. Dzięki! Wreszcie eleganckie rozwiązanie, którego chciałbyś dla tak małego problemu wizualnego.
rakaloof
3
Właśnie wypróbowałem to na moim rzeczywistym iPhonie 6S z systemem iOS 11, a łącze stało się niebieskie.
Lukas Petr
1
Próbowałem też tego na Nexusie 5X z Androidem 8.1.0 i Chrome 68.0.3440.91. Łącze zmieniło kolor na niebieski.
Trevin Avery
12

Napotkałem ten sam problem (w moim przypadku z przeglądarkami mobilnymi Samsunga) i dlatego natknąłem się na to pytanie.

Dzięki odpowiedzi Calsala znalazłem coś, co moim zdaniem wykluczy praktycznie wszystkie przeglądarki komputerowe, ponieważ wydaje się, że jest rozpoznawane przez przeglądarki mobilne, które wypróbowałem (patrz zrzut ekranu ze skompilowanej tabeli: tabela wykrywania funkcji wskaźnika CSS ).

Dokumentacja internetowa MDN stwierdza to

Funkcja wskaźnika CSS @media może być używana do stosowania stylów w zależności od tego, czy głównym mechanizmem wprowadzania użytkownika jest urządzenie wskazujące, a jeśli tak, to jak dokładne jest

.

Odkryłem, że wskaźnik: gruboziarnisty to coś, czego nie znają wszystkie przeglądarki na komputerze w załączonej tabeli, ale są znane wszystkim przeglądarkom mobilnym w tej samej tabeli. Wydaje się, że jest to najbardziej efektywny wybór, ponieważ wszystkie inne wartości słów kluczowych wskaźnika dają niespójne wyniki.

Dlatego możesz skonstruować zapytanie o media, takie jak opisane przez Calsal, ale nieco zmodyfikowane. Wykorzystuje odwróconą logikę, aby wykluczyć wszystkie urządzenia dotykowe.

Mieszanka Sass:

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

Skompilowany CSS:

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

Jest to również opisane w tym streszczeniu, które stworzyłem po zbadaniu problemu. Codepen do badań empirycznych.

AKTUALIZACJA : W chwili pisania tej aktualizacji 23.08.2018 r. I wskazana przez @DmitriPavlutin ta technika wydaje się już nie działać z przeglądarką Firefox na komputery stacjonarne.

ProgrammerPer
źródło
Dzięki @DmitriPavlutin, zgodnie z tabelą (kiedy została skompilowana) powinno, ale mogłem spojrzeć jeszcze raz.
ProgrammerPer
@DmitriPavlutin Rzeczywiście masz rację. Zaktualizuje odpowiedź
ProgrammerPer
1
Masz na myśli, że nie działa na Firefox Desktop, jeśli jest używany wyłącznie z urządzeniem dotykowym? Działa świetnie ze wszystkim, czego próbowałem.
FuzzeeLowgeek
@FuzzeeLowgeek Brzmi dobrze! Ostatni raz sprawdzałem 2018-08-23, więc jeśli możesz to potwierdzić na pewno, może mogę ponownie zaktualizować odpowiedź?
ProgrammerPer
9

Zgodnie z odpowiedzią Jasona możemy adresować tylko te urządzenia, które nie obsługują zawisu z czystymi zapytaniami o media css. Możemy również odnosić się tylko do urządzeń obsługujących dymek , na przykład odpowiedź moogala w podobnym pytaniu, z @media not all and (hover: none). Wygląda dziwnie, ale działa.

Zrobiłem z tego miks Sassa dla łatwiejszego użycia:

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

Aktualizacja 15.05.2019 : Polecam ten artykuł z Medium, który przechodzi przez wszystkie różne urządzenia, na które możemy kierować za pomocą CSS. Zasadniczo jest to mieszanka tych reguł dotyczących multimediów, połącz je dla określonych celów:

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

Przykład dla konkretnych celów:

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

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

Uwielbiam mieszanki, w ten sposób używam mojego miksu najechania na docelowe tylko urządzenia, które go obsługują:

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

button {
    @include on-hover {
        color: blue;
    }
}
Calsal
źródło
to w ogóle nie działa. masz hover: brak w zapytaniu o media dla miksu obsługiwanego przez najechanie kursorem? potrzebujesz wskaźnika: gruboziarnistego, jak na inną odpowiedź tutaj.
Allan Nienhuis
Czy nawet próbowałeś tego, czy po prostu mówisz, że nie działa, ponieważ wygląda dziwnie? Dlatego napisałem „Wygląda dziwnie”. I DZIAŁA dla mnie bez wskaźnika: zgrubnie.
Calsal
Miałem pewne niespójne wyniki z podejściem CSS do tego na moim OnePlus 5T (zarówno w Chrome, jak i Firefix). To działało dobrze na iOS, ale nie mogłem go zmusić do pracy na OnePlus. Dokładnie przetestowałem za pomocą dowolnego wskaźnika i dowolnego najechania
Zeth
6

Obecnie mam do czynienia z podobnym problemem.

Natychmiast przychodzą mi do głowy dwie główne opcje: (1) sprawdzanie ciągów znaków użytkownika lub (2) utrzymywanie oddzielnych stron mobilnych przy użyciu innego adresu URL i zachęcanie użytkowników do wybierania tego, co jest dla nich lepsze.

  1. Jeśli jesteś w stanie użyć internetowego języka taśmy klejącej, takiego jak PHP lub Ruby, możesz sprawdzić ciąg użytkownika urządzenia żądającego strony i po prostu podać tę samą treść, ale <link rel="mobile.css" />zamiast normalnego stylu.

Ciągi użytkownika zawierają informacje identyfikujące przeglądarkę, mechanizm renderujący, system operacyjny itp. To do Ciebie należy decyzja, które urządzenia są „dotykowe”, a które nie. Możesz być w stanie znaleźć te informacje gdzieś dostępne i zmapować je do swojego systemu.

O. Jeśli możesz ignorować stare przeglądarki , wystarczy dodać jedną regułę do normalnego, niemobilnego css, a mianowicie: EDYCJA : Erk. Po przeprowadzeniu pewnych eksperymentów odkryłem, że poniższa reguła wyłącza również możliwość podążania za linkami w przeglądarkach webkit, a nie tylko powoduje wyłączenie efektów estetycznych - zobacz http://jsfiddle.net/3nkcdeao/
W związku z tym będziesz mieć aby być nieco bardziej selektywnym, jeśli chodzi o modyfikowanie reguł dla obudowy mobilnej niż to, co tutaj pokazuję, ale może to być pomocny punkt wyjścia:

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

Na marginesie, wyłączenie zdarzeń wskaźnika na rodzicu, a następnie jawne włączenie ich na dziecko powoduje obecnie, że wszelkie efekty najechania na rodzica stają się ponownie aktywne, jeśli wejdzie element potomny :hover.
Zobacz http://jsfiddle.net/38Lookhp/5/

B. Jeśli obsługujesz starsze programy do renderowania w Internecie, będziesz musiał wykonać trochę więcej pracy, aby usunąć wszelkie reguły, które ustawiają specjalne style w trakcie :hover. Aby zaoszczędzić czas wszystkich, może po prostu chcesz zbudować automatycznego kopiowania + sed polecenie, które można uruchomić na swoich standardowych arkuszy stylów, aby stworzyć mobilne wersje ing. To pozwoliłoby ci po prostu napisać / zaktualizować standardowy kod i usunąć wszelkie reguły stylu, które są używane :hoverw mobilnej wersji twoich stron.

  1. (I) Alternatywnie, po prostu poinformuj użytkowników, że oprócz witryny website.com masz witrynę m.website.com dla urządzeń mobilnych . Chociaż najczęstszym sposobem jest subdomena, możesz również wprowadzić inną przewidywalną modyfikację danego adresu URL, aby umożliwić użytkownikom mobilnym dostęp do zmodyfikowanych stron. Na tym etapie warto mieć pewność, że nie będą musieli modyfikować adresu URL za każdym razem, gdy przejdą do innej części witryny.

Ponownie, możesz po prostu dodać jedną lub dwie dodatkowe reguły do ​​arkuszy stylów lub być zmuszonym do zrobienia czegoś nieco bardziej skomplikowanego za pomocą seda lub podobnego narzędzia. Prawdopodobnie byłoby to najłatwiejsze do zastosowania: nie do reguł stylizacji, takich jak div:not(.disruptive):hover {...dodawanie class="disruptive"do elementów, które robią irytujące rzeczy dla użytkowników mobilnych za pomocą js lub języka serwera, zamiast zamieniać CSS.

  1. (II) Możesz połączyć pierwsze dwa i (jeśli podejrzewasz, że użytkownik wszedł na niewłaściwą wersję strony), możesz zasugerować, aby przełączył się na wyświetlacz typu mobilnego lub z niego wyłączył, lub po prostu mieć gdzieś link, który pozwala użytkownikom na flopowanie tam iz powrotem. Jak już wspomniano, zapytania @media mogą być również przydatne do określania, co jest używane do odwiedzenia.

  2. (III) Jeśli masz ochotę na rozwiązanie jQuery, gdy już wiesz, które urządzenia są „dotykowe”, a które nie, może okazać się, że pomocne może być ignorowanie wskaźnika CSS na urządzeniach z ekranem dotykowym .

RzadkoNeedy
źródło
pointer-events- to jest wspaniałe! To jest dokładnie to, czego szukałem, wielkie dzięki!
Simon Fernderer,
1
@SimonFerndagues Cóż, mam nadzieję, że będzie to pomocne w przyszłości. Pamiętaj o zastrzeżeniu, że do tej pory <a>linki mogą być niedostępne w ramach pointer-events:none. Przy odrobinie szczęścia to się zmieni później - albo CSS 3.x lub 4.0+ będzie mieć pointer-events:navigation-onlylub podobny.
RzadkoNeedy
6

Spróbuj tego:

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

AKTUALIZACJA: niestety W3C usunęło tę właściwość ze specyfikacji ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).

Marouen Mhiri
źródło
To rzeczywiście rozwiązałoby problem. Nigdy wcześniej o tym nie słyszałem. W jakiej wersji przeglądarki to ma działać?
Simon Ferndacious,
3
@SimonFerndagues caniuse.com/#feat=css-media-interaction i więcej informacji: dev.opera.com/articles/media-features
Sceptic
Dobrze ... Nie ma szerokiej obsługi przeglądarki.
Giacomo Paita
To super! Dziękuję za tak wygodne rozwiązanie. Mam nadzieję, że zostanie dodany do standardów W3C.
GProst
cieszę się, że mogłem pomóc ^^
Marouen Mhiri
5

Możesz użyć Modernizr JS (zobacz także tę odpowiedź StackOverflow ) lub stworzyć niestandardową funkcję JS:

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

aby wykryć obsługę zdarzenia dotykowego w przeglądarce, a następnie przypisać zwykłą CSSwłaściwość, przechodząc przez element z html.no-touchklasą, na przykład:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}
Giacomo Paita
źródło
Zasugerował to również @blade - jednak użycie htmltagu zamiast bodytagu może sprawić, że będzie się lepiej czytać. To jest właściwie rozwiązanie, którego obecnie używam. Mimo wszystko dziekuję.
Simon Ferndacious,
1

To było dla mnie pomocne: 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");
                    }
                }
            }
        }
    }
}
mineroot
źródło
1

Jest to również możliwe obejście, ale będziesz musiał przejść przez swój css i dodać .no-touchklasę przed stylami najechania.

JavaScript:

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

Przykład 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>

Źródło

Ps Należy jednak pamiętać, że na rynku pojawia się coraz więcej urządzeń dotykowych, które jednocześnie obsługują również sterowanie myszą.

mr.mii
źródło
0

To może nie być jeszcze idealne rozwiązanie (i to z jQuery), ale może jest to kierunek / koncepcja, nad którą należy popracować: a co z zrobieniem tego w drugą stronę? Oznacza to, że domyślnie dezaktywujesz stany: hover css i aktywujesz je, jeśli zdarzenie mousemove zostanie wykryte w dowolnym miejscu w dokumencie. Oczywiście to nie działa, jeśli ktoś dezaktywuje js. Co jeszcze może przemawiać przeciwko robieniu tego w ten sposób?

Może tak:

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");
});
lars at upstruct
źródło
1
Jednym z problemów jest to, że jest to również .mousemove () po kliknięciu czegoś na urządzeniach dotykowych.
lars na upstruct
1
Prawdopodobnie wyzwolisz to zdarzenie non-stop, co wpłynie na wydajność. Jeśli to zadziała, to lepiej użyj$('body').one.('mousemove', ...)
Simon Fernderer
0

Spróbuj tego (w tym przykładzie używam tła i koloru tła):

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;
}
HU TanKy
źródło
0

Brudny sposób ... Nie elegancki, ale najłatwiejszy sposób, który może cię uratować.

Usuń wszystko, co charakteryzuje ruch po najechaniu.

.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;
  }
}
Fellipe Sanches
źródło
0

Jeśli Twoim problemem jest dotknięcie / dotknięcie Androida i całego div pokrytego niebieskim przezroczystym kolorem! Następnie musisz po prostu zmienić

KURSOR: WSKAŹNIK; do CURSOR: DEFAULT;

użyj mediaQuery, aby ukryć się w telefonie komórkowym / tablecie.

To działa dla mnie.

kunal Sharma
źródło
-1

Wypróbuj to proste rozwiązanie jquery 2019, chociaż było ono już od jakiegoś czasu;

  1. dodaj tę wtyczkę do głowy:

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

  2. dodaj to do js:

    $ ("*"). on ("touchend", function (e) {$ (this) .focus ();}); // dotyczy wszystkich elementów

  3. kilka sugerowanych odmian tego to:

    $ (": input,: checkbox,"). on ("touchend", function (e) {(this) .focus);}); // określ elementy

    $ ("*"). on ("click, touchend", function (e) {$ (this) .focus ();}); // dołącz zdarzenie kliknięcia

    css: body {kursor: wskaźnik; } // dotknij w dowolnym miejscu, aby zakończyć fokus

Uwagi

  • umieść wtyczkę przed bootstrap.js, aby uniknąć wpływu na podpowiedzi
  • testowano tylko na iPhonie XR ios 12.1.12 i iPadzie 3 ios 9.3.5 przy użyciu przeglądarki Safari lub Chrome.

Bibliografia:

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

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

Darren
źródło
2
W 2019 roku nie powinieneś używać jQuery - WebAPI jest dość potężne i obsługuje wszystkie główne funkcje.
acme
Tak ... jQuery w 2019 roku? Co powiesz na Flash? Hehehe.
remed.io