Все элементы div имеют одинаковые свойства, и при наведении курсора один из них не меняет радиус границы до 50%.

avatar
pr0grammar
8 августа 2021 в 20:48
69
0
0

Div, имеющий класс oo, должен стать кружком при наведении курсора, но это не так. Он имеет те же свойства, что и все остальные элементы div, но не становится кругом при наведении курсора, в то время как другие делают это. Что здесь не так?

:root {
  --xx: -10deg;
}

div {
  height: 50px;
  width: 50px;
  background: blue;
  position: relative;
  transition-duration: 1s;
}

.oo {
  background: blue;
}

.pp {
  background: lightgreen;
}

.qq {
  background: yellow;
}

.rr {
  background: red;
}


div:hover .oo {
  transform: translate(20%, 20%) rotate(var(--xx));
  border-radius: 50%;
}

div:hover .pp {
  transform: translate(40%, 40%) rotate(var(--xx));
  border-radius: 50%;
}

div:hover .qq {
  transform: translate(60%, 60%) rotate(var(--xx));
  border-radius: 50%;
}

div:hover .rr {
  transform: translate(80%, 80%) rotate(var(--xx));
  border-radius: 50%;
}
  <div class='oo'>
    <div class='pp'>
      <div class='qq'>
        <div class='rr'></div>
      </div>
    </div>
  </div>
Источник

Ответы (0)