Forum PHP.pl > [CSS][HTML]blokowanie wybranego obszaru <a>

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]blokowanie wybranego obszaru <a>

stellatus

23.04.2020, 11:48:15

Kod

Kod

.div1 {
  background-color: green;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  width: 200px;
  height: 200px;
}

.div3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("https://www.freuciv.com/wp-content/uploads/2020/04/cinema.png")
    0 0 no-repeat;
  background-size: auto;
  width: 50px;
  height: 50px;
}

Jak najprościej wyłączyć .div3 spoza zasięgu <a>? Innymi słowy: jak to zrobić, żeby nie można było z .div3 otworzyć hiperłącza?

trueblue

23.04.2020, 11:53:37

https://developer.mozilla.org/en-US/docs/We.../pointer-events

A dlaczego element w środku nie będzie aktywny?

stellatus

23.04.2020, 12:25:37

Wpisanie pointer-events: none w .div3 nie działa.

Spójrz proszę tutaj: https://www.freuciv.com/

Każda miniatura ma ikonę w prawym górnym rogu. Ikony te informują o typie odnośnika. Naciskanie na nie nie powinno powodować otwierania hiperłączy postów. Jedynie najchechanie myszką powinno powodować wyświetlenie się informacji tekstowej dotyczącej znaczenia ikony ("play" - film; "klawiatura" - software, itd.).

Na ekranach dotykowych, po kliknięciu powinna też się wyświetlać ta informacja, więc właściwie to nie wiem jak to rozwiązać. Wygląda na to, że chyba najlepiej zrobić to tak jak w ikonach w lewych górnych rogach miniatur. Czy się mylę?

trueblue

23.04.2020, 12:40:46

Jeśli tak, to lepiej stwórz nadrzędny kontener, w którym element <a> oraz ta ikona będą sąsiadami (na tym samym poziomie).

stellatus

24.04.2020, 09:44:56

Tak spróbuję. Dzięki!

Dzięki, bardzo mi pomogłeś.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.