Transform scale (): анимация при наведении мыши перестает работать, когда элемент становится меньше

Question

Я пытаюсь заставить текст вращаться на 180 градусов и уменьшать его при наведении на него (используя переход), однако, когда элемент становится меньше, он теряет фокус, и указатель больше не находится над ним, и анимация не работает.

Я пытаюсь выяснить, как решить эту проблему, но пока не нашел решения.

Вот HTML:

<div class="aligner">
  <div class="titdiv">
    <h1 class="title1">Once upon a time..</h1>   </div>
</div>

Вот CSS:

.aligner{
  position: fixed;
  bottom:0px;
  left:0px;
  border:10px solid slateblue; 
  height: 100px;  
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  text-transform: uppercase;
  font-family: Helvetica;
  width:calc(100% - 20px);
  background-color: #f07d86;
  transition:all 1s linear;
  border-radius:20px;
  transition:1s all;
}

.titdiv:hover{
  color:#333;
  transform:scale(.4) rotate(180deg); 
}
.titdiv{
  transition:1s all
}

.aligner:hover{
  background:#dcdcdc;
  border:1px solid transparent;
  width:100%; 
}

Answer 1

Просто измените селектор для вашего правила CSS, которое имеет преобразование:

.aligner:hover .titdiv {...}

То есть примените tramsform и изменение цвета к элементу .titdiv, когда элемент .aligner наведен.

.aligner{
  position: fixed;
  bottom:0px;
  left:0px;
  border:10px solid slateblue; 
  height: 100px;  
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  text-transform: uppercase;
  font-family: Helvetica;
  width:calc(100% - 20px);
  background-color: #f07d86;
  transition:all 1s linear;
  border-radius:20px;
  transition:1s all;
}

.aligner:hover .titdiv{
  color:#333;
  transform:scale(.4) rotate(180deg); 
}
.titdiv{
  transition:1s all
}

.aligner:hover{
  background:#dcdcdc;
  border:1px solid transparent;
  width:100%; 
}

<div class="aligner">
  <div class="titdiv">
    <h1 class="title1">Once upon a time..</h1>   </div>
</div>