懸停時CSS過渡閃爍

真棒，你用你的寶貴時間來閱讀我的問題！懸停時CSS過渡閃爍

我想翻轉懸停的div。一切都很好，但在過渡期間閃爍。它幾乎看起來像翻了幾遍！這破壞了翻蓋的整個效果。這裏如下我的代碼和一個小提琴：

而對於 CSS：

.rotate { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    padding:20px; 
    background-color: #333; 
    width: 200px; 
    text-align: center; 
    margin: 0 auto; 
    font-family: sans-serif; 
    color: #FFFFFF; 
    border-top: #E9F01D 3px solid; 
} 
.rotate:hover { 
    letter-spacing: 5px; 
    color: #E9F01D; 
    cursor: pointer; 
    -ms-transform: rotatex(360deg); 
    -webkit-transform: rotatex(360deg); 
    transform: rotatex(360deg); 
}

這是閃爍效果可預防或不？如果是這樣，我該怎麼做？

在此先感謝！

來源

2014-09-29 Wijnand M

嘗試添加該> -webkit-背面能見度：隱藏; – webkit 2014-09-29 13:42:52

看起來，當您將鼠標懸停並縮小時，鼠標指針會離開div（因爲它縮小），導致它再次增長，直到您的鼠標指針再次觸及它。一個可能的解決方案可能是將：懸停在父元素上 – fboes 2014-09-29 13:43:33

@fboes這不會對父元素產生完全相同的效果嗎？我會試試它，只是想知道.. – 2014-09-29 13:47:03

正如在評論中提到：

的主要問題是：當鼠標懸停在移動（或動畫）的div，你可以從元素，只需取消懸停，因爲這將光標移到下方。

解決方案：將同時您懸停不改變其大小的含元件上的懸停選擇器：

Example Here。

.rotate { 
 
    width: 200px; height:80px; 
 
    background:green; 
 
} 
 

 
.rotate .rotate-inner { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
     -ms-transition: all 0.3s; 
 
      transition: all 0.3s; 
 
    
 
    padding:20px; 
 
    background-color: #333; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    border-top: #E9F01D 3px solid; 
 
} 
 

 
.rotate:hover .rotate-inner { 
 
    letter-spacing: 5px; 
 
    color: #E9F01D; 
 
    cursor: pointer; 
 
    
 
    -webkit-transform: rotatex(360deg); 
 
    -moz-transform: rotatex(360deg); 
 
     -ms-transform: rotatex(360deg); 
 
      transform: rotatex(360deg); 
 
}

<div class="rotate"> 
 
    <div class="rotate-inner">HOVER ME</div> 
 
</div>

來源

2014-09-29 15:44:32 fboes

懸停時CSS過渡閃爍

回答

相關問題