在悬停时使用转换，而不会恢复到以前的状态

Question

我有'box' rotates 90 degrees。

的div when the user hovers it

当用户将鼠标移开时，盒子计数器会旋转回原位。

我想阻止这一点。 I.E：当用户将鼠标悬停在方框上时，即使他将鼠标从包装盒中取出，它也会旋转并保持这种状态。

  

请查看基本设置：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFIDDLE

为了让它按照我的意愿行事，我应该改变什么？

Answer 1

使用animation

实现此目的的一种方法

喜欢这个

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