为什么当鼠标移动并单击时反转，css3悬停效果会跳? [英] Why does css3 hover effect jump when mouse move and reverse on click?

问题描述

我有一个盒子，它的负载是平坦的，但是在悬停时可以旋转.设置:

I have a box that is flat on load but rotates on hover. Setup:

<div class="work-box">
     <div class="face primary">
          <div class="work-name">The library</div>
          <div class="blue"></div>
     </div>
     <div class="face secondary">                   
          <div class="cover" data-workid="69"></div>
          <div class="red"></div>
     </div>
</div>

工作示例: http://jsfiddle.net/74ccbpke/

我的问题是鼠标移动动画时闪烁.同样，当我单击鼠标时，动画将在鼠标向下移动时重置，并在鼠标向上移动时返回.

My issues when the mouse moves the animation flickers. Also when I click the mouse the animation resets on mouse down and returns on mouse up.

推荐答案

您可以在工作框周围添加一个不会移动的额外容器，并让该容器对悬停做出反应.

You could add an extra container around the work-box that doesn't move, and let this one react to the hovering.

http://jsfiddle.net/willemvb/mszfzrvd/

<div class="work-box-container">
    <div class="work-box">
        ...
    </div>
</div>

CSS

.work-box-container:hover .work-box{
    ...
}

这篇关于为什么当鼠标移动并单击时反转，css3悬停效果会跳?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！