Как установить пользовательский стиль и компонент скорости

Question

При наведении курсора на звезду в компоненте Ant Design Rate ее размер увеличивается, а при наведении мыши возвращается к исходному размеру. Вероятно, это связано с врожденным transform: scale(x) в компоненте. Я хочу остановить эту анимацию / поведение звезд, если наведу на них курсор мыши. Как я могу этого достичь? Я пробовал разные element state в devtools, но не смог.

Я могу установить пользовательские width и height, но не могу найти то, что может остановить анимацию / преобразование: /. код песочницы

.ant-rate-star.ant-rate-star-full i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}
.ant-rate-star.ant-rate-star-zero i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}
.ant-rate-star.ant-rate-star-half.ant-rate-star-active i svg {
  width: 15px;
  height: 20px;
  margin: -3.5px;
}

.ant-rate-star.ant-rate-star-full i svg:hover {
  transform: scale(1); //not working
}

Answer 1

Ключевыми классами для выделения здесь являются .ant-rate-star.ant-rate-star-full, .ant-rate-star.ant-rate-star-zero и .ant-rate-star.ant-rate-star-half.ant-rate-star-active, поскольку они соответствуют полностью заполненным, пустым и наполовину заполненным звездам. Вы правы, предполагая, что это было transform: scale(x);. С небольшим тестированием вы можете найти правильное значение шкалы (как ни странно, .91 было наиболее плавным). Мне также пришлось изменить transition, так как корневой элемент имел какой-то переход, при котором масштабирование счетчика сработало бы, но был бы короткий период «отскока», когда он переходил от попыток масштабирования к принудительному масштабированию вниз.

Вот обновление код песочницы . Ниже приведен обновленный CSS.

  .ant-rate-star.ant-rate-star-full,
  .ant-rate-star.ant-rate-star-zero,
  .ant-rate-star.ant-rate-star-half.ant-rate-star-active {
      transition: transform 0s;
  }

  .ant-rate-star.ant-rate-star-half.ant-rate-star-active:hover {
      transform: scale(0.91);
  }

  .ant-rate-star.ant-rate-star-full:hover {
      transform: scale(0.91);
  }

  .ant-rate-star.ant-rate-star-zero:hover {
      transform: scale(0.91);
  }

Я также недавно написал пост в блоге, где написал пост в блоге о моей собственной системе звездного рейтинга с ванильными JS, CSS иHTML, если вы заинтересованы в чем-то более легко настраиваемом :).