W pakiecie Webkit na urządzeniu iPhone/iPad/iPod określenie stylowania dla: aktywnej pseudoklasy dla znacznika <a> nie powoduje aktywacji po dotknięciu elementu. Jak mogę to uruchomić? Przykładowy kod:: aktywna pseudoklasa nie działa w mobilnym safari
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
<body ontouchstart="">
...
</body>
Zastosowany tylko jeden raz, w przeciwieństwie do każdego elementu przycisku zdawał się naprawiać wszystkie przyciski na stronie. Alternatywnie możesz użyć tej małej biblioteki JS o nazwie "Fastclick". Przyspiesza to zdarzenia kliknięć na urządzeniach dotykowych i zajmuje się również tym problemem.
Dodaj obsługę zdarzeń dla ontouchstart w swoim tagu < a>. To powoduje, że CSS działa w magiczny sposób.
<a ontouchstart="">Click me</a>
Niestety, ta odpowiedź jest stary, ale dlaczego to działa chociaż? Nie mam nic przeciwko "magicznemu" jako powód, ale jeśli mógłbyś wyjaśnić, dlaczego to działa, chciałbym przeczytać więcej szczegółów. – mhulse
@mhulse Chciałbym również wiedzieć, dlaczego. –
Ha! Jesteśmy w tej samej łodzi. Spróbuję zrobić kilka badań i zamieścić tutaj link do (pół-) oficjalnych dokumentów na ten temat. Podoba mi się, że ta technika działa, po prostu zastanawiam się, dlaczego? – mhulse
Czy używasz wszystkich pseudoklas lub tylko jednego? Jeśli używasz przynajmniej dwa, upewnij się, że są w odpowiedniej kolejności lub wszyscy przerwa:
a:link
a:visited
a:hover
a:active
..w tej kolejności. Jeśli używasz tylko: aktywne, dodaj link:, nawet jeśli nie stylizujesz go.
wspaniałą wskazówkę, że zamówienie jest ważne podczas stylizacji pseudo klas. – arpie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
<a href="#">Hover</a>
</div>
</body>
</html>
Na najczęściej zadawane pytania, podpisy i autopromocja są niedozwolone. – LittleBobbyTables
//hover for ios
-webkit-tap-highlight-color: #ccc;
Działa to dla mnie, dodać do swojego CSS na elemencie, który chcesz wyróżnić
Jak inni odpowiedzi, iOS Safari nie wywoła :active pesudo klasy, chyba że wydarzenie dotykowe jest dołączone do elementu, ale jak dotąd to zachowanie było "magiczne". Natknąłem się na tej małej notki na Safari Developer Library to wszystko wyjaśnia (Kopalnia nacisk):
Można również użyć właściwości
-webkit-tap-highlight-colorCSS w połączeniu z ustawieniem dotykowy zdarzenie skonfigurowanie przycisków, aby zachowywać się podobnie do pulpitu. W systemie iOS zdarzenia myszy są wysyłane tak szybko, że nigdy nie są odbierane ani aktywne, ani nieaktywne. W związku z tym pseudo stan:activejest wyzwalany tylko wtedy, gdy nie jest dotykowy zdarzenie ustawiony na element na przykład HTML, gdy ontouchstart jest ustawiony na elemencie następująco:<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button>Teraz, gdy przycisk jest na podsłuchu i przytrzymał w systemie iOS przycisk zmienia się na określony kolor bez otaczającego go przezroczystego szarego koloru.
Innymi słowy, ustawienie ontouchstart wydarzenie (nawet jeśli jest pusty) wyraźnie mówi przeglądarkę reagować na dotyk wydarzenia.
Uważam, że jest to nieprawidłowe zachowanie i prawdopodobnie pochodzi z czasów, gdy "mobilna" sieć praktycznie nie istniała (spójrz na zrzuty ekranu na połączonej stronie, aby zobaczyć, co mam na myśli), i wszystko było zorientowana na mysz. Warto zauważyć, że inne, nowsze przeglądarki mobilne, takie jak Android, wyświetlają pseudo-stan `` active '' po dotknięciu, bez żadnych hacków takich jak to, co jest potrzebne dla iOS.
(Side-uwaga: Jeśli chcesz użyć własnych stylów niestandardowych na iOS, można również wyłączyć półprzezroczyste okno domyślne szarą że iOS wykorzystuje zamiast pseudo-państwa :active za pomocą właściwości -webkit-tap-highlight-color CSS, jak wyjaśniono na tej samej linkowanej stronie powyżej.)
Po kilku eksperymentach, oczekiwane rozwiązanie ustawiania zdarzenie ontouchstart na elemencie <body> że wszystkie zdarzenia dotykowe następnie bańka na nie w pełni działać. Jeśli element jest widoczny w oknie roboczym podczas ładowania strony, to działa poprawnie, ale przewijanie w dół i stuknięcie elementu znajdującego się poza obszarem wyświetlania powoduje, że pseudo-stan :active uruchamia się tak, jak powinien. Tak więc, zamiast
<!DOCTYPE html>
<html><body ontouchstart></body></html>
dołączyć zdarzenie do wszystkich elementów, zamiast opierania się na zdarzenie propagacji do ciała (przy użyciu jQuery):
$('body *').on('touchstart', function(){});
Jednak nie jestem świadomy wpływ na wydajność tego, więc uważaj.
Edycja: nie jest poważną wadą tego rozwiązania: dotykając element podczas przewijania strony uruchamia pseudo stanu :active. Czułość jest zbyt silna. Android rozwiązuje ten problem, wprowadzając bardzo małe opóźnienie, zanim pojawi się stan, który zostanie anulowany, jeśli strona zostanie przewinięta. W związku z tym sugeruję użycie tego tylko na wybranych elementach. W moim przypadku tworzę aplikację internetową do użytku w terenie, która jest w zasadzie listą przycisków do nawigacji stron i przesyłania działań. Ponieważ w niektórych przypadkach cała strona to przyciski, to nie będzie dla mnie działać. Możesz jednak ustawić pseudo-stan na :hover, aby go wypełnić. Po wyłączeniu domyślnego szarego okna działa to idealnie.
Doskonałe wyjaśnienie ** ** i nie tylko ** jak **! Dzięki! – coderfin
Rewizja za udostępnienie programistom nie tylko "magicznego" przepisu, jest nieskończenie bardziej pouczająca niż inne, dziękuję za napisanie tego za nas. – user508633
Nie 100% w odniesieniu do tej kwestii, ale można użyć css rodzeństwo włamać się do osiągnięcia tego celu, jak również
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
&:checked + label {
background-color: red;
}
}
Jeśli chcesz użyj czystego html/css tooltip
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
Od 8 grudnia 2016 roku zaakceptowana odpowiedź (<body ontouchstart="">...</body>) nie działa dla mnie w Safari 10 (iPhone 5s): ten hack działa tylko dla tych elementów, które były widoczne podczas ładowania strony.
Jednakże, dodając:
<script type='application/javascript'>
document.addEventListener("touchstart", function() {}, false);
</script>
do head działa tak, jak chcesz, z drugiej jednak strony, że teraz wszystkie wydarzenia podczas dotykowe przewijanie również wywołać pseudo-stan :active na dotykanych elementów. (Jeśli jest to problem dla ciebie, możesz rozważyć FighterJet's:hover obejścia.)
This roboty dla mnie:
document.addEventListener("touchstart", function() {},false);
Uwaga: jeśli nie ten trick warto również usunięcie domyślnego zaczepów podświetlenie kolor Aplikacja Mobile Safari stosuje następującą regułę CSS.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Opublikowałem narzędzie, które powinno rozwiązać ten problem.
Na pierwszy rzut oka problem wygląda zwyczajnie, ale w rzeczywistości zachowanie kliknięć dotykowych musi być dość spersonalizowane, łącznie z funkcjami limitu czasu i takimi, jak "co się stanie, gdy przewiniesz listę linków" lub "co się stanie, gdy naciśnij link, a następnie przesuń mysz/palca z dala od obszaru aktywnego”
To powinno rozwiązać to wszystko naraz: https://www.npmjs.com/package/active-touch
Musisz też mieć swoje: aktywny styl przypisany do .active klasę lub wybrać własną rękę Nazwa klasy. Domyślnie skrypt będzie działał z wszystkimi elementami link, ale możesz go zastąpić własną tablicą selektorów.
Uczciwe, pomocne opinie i uwagi bardzo doceniane!
Rozwiązaniem jest polegać na :target zamiast :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
Styl zostanie uruchomiony, gdy kotwica jest kierowana przez obecnego zawartości, która jest wytrzymała nawet na telefon komórkowy. Wadą jest to, że potrzebujesz innego linku, aby usunąć zakotwiczenie w adresie URL. Kompletny przykład:
a:target {
background-color: red;
}<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
Czy nie wystarczy dodać 'ontouchstart' bez' = "" '? (HTML5) – feklee
Każdy pomysł, jak to działa w ten sposób? – agaase
Dla przyszłych czytelników opublikowaliśmy tutaj wersję demo: [http://jsbin.com/EjiWILe/3/](http://jsbin.com/EjiWILe/3/). Sprawdź funkcjonalność urządzenia z systemem iOS. – mhulse