Chcę zignorować wszystkie :hover
deklaracje CSS, jeśli użytkownik odwiedza naszą witrynę za pomocą urządzenia dotykowego. Ponieważ :hover
CSS 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 :hover
na 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 :hover
deklaracje CSS naraz (bez konieczności znajomości każdej) dla urządzeń dotykowych po ich zadeklarowaniu?
Odpowiedzi:
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
:hover
za pomocą Javascript. Ma to tę zaletę, że nie trzeba dotykać CSS i jest kompatybilne nawet ze starszymi przeglądarkami.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
@media
bloku:lub alternatywnie, zastąp wszystkie reguły najechania kursorem (zgodne ze starszymi przeglądarkami):
Ograniczenia: działa tylko na iOS 9.0+, Chrome na Androida lub Android 5.0+ podczas korzystania z WebView.
hover: hover
przerywa efekty najechania na starsze przeglądarki,hover: none
wymaga 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)hasHover
Klasy mogą być dodane za pomocąhasTouch()
od pierwszego npJednak 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.
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/
źródło
document.styleSheets
istnieje, zamiast używaćtry/catch
?try/catch
na 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.Adaptacja wskaźnika na ratunek!
Ponieważ nie było to dotykane od jakiegoś czasu, możesz użyć:
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.
źródło
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
.
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:
Skompilowany CSS:
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.
źródło
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:
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:
Przykład dla konkretnych celów:
Uwielbiam mieszanki, w ten sposób używam mojego miksu najechania na docelowe tylko urządzenia, które go obsługują:
źródło
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.
<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:
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:hover
w mobilnej wersji twoich stron.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 {...
dodawanieclass="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.(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.
(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 .
źródło
pointer-events
- to jest wspaniałe! To jest dokładnie to, czego szukałem, wielkie dzięki!<a>
linki mogą być niedostępne w ramachpointer-events:none
. Przy odrobinie szczęścia to się zmieni później - albo CSS 3.x lub 4.0+ będzie miećpointer-events:navigation-only
lub podobny.Spróbuj tego:
AKTUALIZACJA: niestety W3C usunęło tę właściwość ze specyfikacji ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).
źródło
Możesz użyć Modernizr JS (zobacz także tę odpowiedź StackOverflow ) lub stworzyć niestandardową funkcję JS:
aby wykryć obsługę zdarzenia dotykowego w przeglądarce, a następnie przypisać zwykłą
CSS
właściwość, przechodząc przez element zhtml.no-touch
klasą, na przykład:źródło
html
tagu zamiastbody
tagu może sprawić, że będzie się lepiej czytać. To jest właściwie rozwiązanie, którego obecnie używam. Mimo wszystko dziekuję.To było dla mnie pomocne: link
źródło
Jest to również możliwe obejście, ale będziesz musiał przejść przez swój css i dodać
.no-touch
klasę przed stylami najechania.JavaScript:
Przykład CSS:
Ź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ą.
źródło
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:
jQuery:
źródło
$('body').one.('mousemove', ...)
Spróbuj tego (w tym przykładzie używam tła i koloru tła):
css:
źródło
Brudny sposób ... Nie elegancki, ale najłatwiejszy sposób, który może cię uratować.
Usuń wszystko, co charakteryzuje ruch po najechaniu.
źródło
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.
źródło
Wypróbuj to proste rozwiązanie jquery 2019, chociaż było ono już od jakiegoś czasu;
dodaj tę wtyczkę do głowy:
src = „https://code.jquery.com/ui/1.12.0/jquery-ui.min.js”
dodaj to do js:
$ ("*"). on ("touchend", function (e) {$ (this) .focus ();}); // dotyczy wszystkich elementów
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
Bibliografia:
https://code.jquery.com/ui/
https://api.jquery.com/category/selectors/jquery-selector-extensions/
źródło