pseudoklasa hover nie działa z opacity

pytanie zadane 22 sierpnia 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)

Witam, chciałem zrobić animację zmiany kolorów po najechaniu na kółka umieszczonych w rogach strony - na kolor im odpowiadającym, przy końcowym efekcie jeszcze napis miał się pojawiać wraz z kolorem, tutaj wystąpił problem gdy chciałem połączyć opacity z hover i nie działa już nawet zmiana koloru, gdzie tkwi problem, bo nie mogę sam do tego dojść?

https://jsfiddle.net/mu1c69v8/

2 odpowiedzi

odpowiedź 22 sierpnia 2022 przez VBService Ekspert (252,740 p.)
wybrane 22 sierpnia 2022 przez jasper93

Najlepsza

Ustaw na środku elementy <p> w <div class="bg"> np. tak

.bg p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
  /* font-weight: arial; tu masz błąd */
  font-weight: bold;
  color: white;
  opacity: 0;
  transition: opacity 1s;
}

dla ciekawszego efektu dodałbym

div.bg {
  height: 100vh;
  background-color: #ddd;
  transition: background 1s; /* TUTAJ */
}

1	komentarz 22 sierpnia 2022 przez jasper93 Obywatel (1,310 p.) Super, transform jeszcze nie znam, ale już niedługo się za to biorę. Dziękuje za zwrócenie uwagi na błąd, już poprawiam :)

komentarz 22 sierpnia 2022 przez VBService Ekspert (252,740 p.)

BTW, do uzyskania okręgu przy jednakowych wartościach:
width i height wystarczy: border-radius: 50%;

div.circle {
  position: fixed;
  height: 34px;
  width: 34px;
  border-radius: 180%; /* ??? */
  border: 2px solid white;
  cursor: pointer;
}

komentarz 22 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)

Fakt, nie wiem czemu wpisałem 180

odpowiedź 22 sierpnia 2022 przez pablop76 VIP (123,120 p.)

Przysłoniłeś wszystko

.bg p {
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 100vh;
  width: 100%;
  font-size: 50px;
  font-weight: arial;
  color: white;
  opacity: 0;
  transition: 1s;
}