html - 使用带悬停的过渡而不恢复到以前的状态

Question

我有一个 div 'box'，它旋转 90 度 当用户悬停它时。

当用户将鼠标移开时，方框计数器会旋转回其原始位置。

我想阻止这种情况。I.E:当用户将鼠标悬停在框上时，它会旋转并保持原样，即使他将鼠标从框中移开也是如此。

Please look at for the basic setup:

.box {
  height: 150px;
  width: 150px;
  background-color: blue;
  transition: 1s all; 
}
.box:hover {
  transform: rotate(90deg);
}  

<div class="box">
  Hover me!
</div>

JSFIDDLE

我应该改变什么才能让它按照我的意愿行事？

Answer 1

您可以使用动画实现此目的的一种方法

像这样

.box {
  height: 150px;
  width: 150px;
  background-color: grey;
  transition: 1s all;
  animation: rotate .4s forwards paused;
}
.box:hover {
  animation-play-state: running;
}
@keyframes rotate {
  from {
    transform: rotate(0);
    }
  to {
    transform: rotate(90deg);
    }
  }

<div class="box">
  Hover me!
</div>

或者

你可以使用js。像这样

$(document).ready(function() {
    $(".box").mouseover(function(e) {
        $(this).css("transform","rotate(90deg)");
    });
});

.box {
  height: 150px;
  width: 150px;
  background-color: grey;
  transition: 1s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  Hover me!
</div>