Question

如何在删除事件后仍然进行转换！我想在悬停时调整div高度，以便更小，但我希望大小仍然更小，即使我从div中移除悬停。

#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}

#header:hover{
height:100px;
}

我希望div在鼠标出来后有100px的高度，我可以只使用css，或者我必须使用jQuery来改变类或者那样吗？

Answer 1

你不能只用CSS来悬停“棒”。您需要使用Javascript添加类或内联样式以保持外观。

Answer 2

你可以用CSS来悬停“棒”。

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 350ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

请参阅http://cdpn.io/GLjpK和http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/。

事件发生后使转换稳定

2 个答案: