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

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?

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/

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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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.

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/