Блог

Главная - Вопросы по программированию - Я хочу перевернуть заднюю часть своей кредитной карты. Не с фокусом

Я хочу перевернуть заднюю часть своей кредитной карты. Не с фокусом

#css

#css

Вопрос:

У меня есть компонент кредитной карты. Это работает, когда есть эффект наведения, но не работает в части фокусировки (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);
}

Ответ №1:

Изменить

 .card:hover .card__front

на

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

Комментарии:

1. jsfiddle.net/c7ehr6tm Это мой простой код, не работающий в вашем примере. Пожалуйста, измените JSFiddle. Мне нужен этот код.

2. Можно ли использовать js? Потому что ввод и карта находятся на разных уровнях иерархии, что означает, что нет простого способа (я думаю) добиться этого в CSS так, как вы хотите… Здесь я сделал это в JS: jsfiddle.net/exavujd5

Метки: