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 {...}

这就是说，将.titdiv元素悬停在.aligner元素上时，可以将trassform和颜色更改应用于该元素。

.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>

Transform scale（）：当元素变小时，悬停动画失败

1 个答案: