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

Question

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ć?

Answer 1

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

Comments

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

 

---

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?

---

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.

---

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

 

---

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

---

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.