為什么當鼠標移動並單擊時反轉，css3懸停效果會跳？

Question

我有一個在負載時平放但在懸停時旋轉的盒子。 設定：

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

鼠標移動動畫時出現我的問題。 同樣，當我單擊鼠標時，動畫將在按下鼠標時重置，並在按下鼠標時返回。

Answer 1

您可以在工作框周圍添加一個額外的容器，該容器不會移動，並讓它對懸停做出反應。

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

的HTML

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

的CSS

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