• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wciśniety button w telefonie taki zostaje. Jak to zmienić?

Aruba Cloud - Virtual Private Server VPS
+1 głos
556 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

na stronie wygląda to tak:

.fa-home:hover {
  text-shadow: 0 0 4px rgb(0, 51, 21);
}

a na telefonie:

.fa-home:active {
  text-shadow: 0 0 4px rgb(0, 51, 21);
  outline: none;
}

 

ale po naciśnieciu w telefonie pozostaje wygląd wciśniętego. Jak to zmienić?

1 odpowiedź

+2 głosów
odpowiedź 25 kwietnia 2021 przez Comandeer Guru (606,480 p.)

Mieliśmy podobny problem w CKE4. Rozwiązaliśmy go otaczając style dla :hover w media query wykrywające obsługę hovera.

komentarz 26 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Zrobiłem tak, ale nie działa. Wciąż widnieje jako wciśnięty.

@media (hover: hover) {
  .fa-home:hover {
    transform: translate(0.2px);
    text-shadow: 0 0 1px rgb(20, 50, 30);
  }
}

 

komentarz 26 kwietnia 2021 przez Comandeer Guru (606,480 p.)

Hm, a jak zamienisz hover: hover na pointer: coarse? Bo niektóre Androidy oszukują i twierdzą, że wspierają :hover. No i czy usunąłeś style dla :hover spoza tego media query?

komentarz 26 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Obecnie mam tak, ale też nie działa

@media (pointer: coarse) {
  .fa-home:hover {
    transform: translate(0.2px);
    text-shadow: 0 0 1px rgb(20, 50, 20);
  }
}

Mam :hover ustawiony poza @media, ale gdy go usunę to nie działa na stronie wyświetlanej na komputerze.

komentarz 26 kwietnia 2021 przez Comandeer Guru (606,480 p.)

Możesz to pokazać online? Bo coś takiego działa: https://codepen.io/Comandeer/pen/WNRmRNq

Widzę też, że podałem Ci złą wartość dla pointer, za co przepraszam. Powinno być fine, bo chcemy włączyć dla desktopów, nie dla mobilnych (coarse oznacza nieprecyzyjny wskaźnik, czyli de facto dotyk; fine to urządzenie typu myszka):

@media (pointer: fine) {
  .fa-home:hover {
    transform: translate(0.2px);
    text-shadow: 0 0 1px rgb(20, 50, 20);
  }
}

 

komentarz 26 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

Ale właśnie na desktopach działa, a na mobilnych nie. Więc brać pod uwagę pointer:coarse?

komentarz 26 kwietnia 2021 przez Comandeer Guru (606,480 p.)

No tak. Problemem jest :hover na urządzeniu mobilnym. Więc pomysł jest taki, żeby aplikować style dla :hover tylko dla desktopa – stąd taki warunek.

Podobne pytania

0 głosów
1 odpowiedź 614 wizyt
pytanie zadane 12 czerwca 2022 w Python przez koleś34 Gaduła (3,270 p.)
0 głosów
1 odpowiedź 159 wizyt
pytanie zadane 16 lutego 2018 w PHP przez daniel2k Obywatel (1,380 p.)
+1 głos
1 odpowiedź 1,168 wizyt
pytanie zadane 13 grudnia 2017 w Nasze projekty przez M4tthew Gaduła (4,480 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...