css - CSS3 变换 - 处理悬停后的行为

Question

在这个 CSS3 代码中，当我将鼠标悬停在类上时，它会旋转 360 度，但当我离开类时，它会恢复原样。

问题：即使我离开了，我怎样才能让班级轮流？

下面的代码：

.class{  transition: transform 1s; }
.class:hover{  transform: rotate(360deg); }

Answer 1

您需要同时使用和状态的transition属性。normalhovered

运行演示：点击这里

<div class="both" > I'll animate on hover and on blur </div>
<div class="hover"> I'll animate on hover only        </div>
<div class="blur" > I'll animate on blur only         </div>

• 两个都

  Normal ----1s----> Hovered ----1s----> Normal
  

  1s 的转换始终应用于transform，在悬停时执行；然后它将在两个方向上工作。

  .both {
      transition: transform 1s;
  }
  
  .both:hover {
      transform: rotate(360deg);
  }
  

• 徘徊

  Normal ----1s----> Hovered ----0s----> Normal
  

  它将使用 1s 的转换到达悬停状态，但它将使用 0s 的转换从悬停状态到达正常状态

  .hover {    
      transition: transform 0s;
  }
  
  .hover:hover {
      transition: transform 1s;
      transform: rotate(360deg);
  }
  

• 模糊

  Normal ----0s----> Hovered ----1s----> Normal
  

  它将使用 0stransition达到悬停状态，但它将使用 1s从悬停状态transition达到正常状态

  .blur {    
      transition: transform 1s;
  }
  
  .blur:hover {
      transition: transform 0s;
      transform: rotate(360deg);
  }
  

Answer 2

没有直接和纯 css 的答案，你应该使用 js 或 jquery。
这是jQuery版本：

$('.class').on('mouseEnter', function(){
    $(this).trigger('hover');
});

但是还有其他一些方法可以做这样的事情