我想把我的信用卡转到背面。不是专注

Question

我有一个信用卡组件。它在有悬停效果时起作用，但在相应输入的焦点部分(CCV)不起作用。我该怎么做呢？

组件完整代码：https://codepen.io/veronicadev/pen/VXqZgR (不是我的代码)

HTML元素

<input-mask id="special-cvc-input" v-model="cardCvc" type="text" mask="999"></input-mask>

工作悬停CSS代码

.card:hover .card__front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.card:hover .card__back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
}

不工作的焦点CSS代码

#special-cvc-input:focus .card_front{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

#special-cvc-input:focus .card__back{
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
}

Answer 1

变化

.card:hover .card__front

在……上面

#special-cvc-input:focus + .card .card__back