當鼠標懸停但不移動時，轉換後的圖像不會保持可見狀態？

-1

我有我的課程頁面here，在這裏我使用CSS對圖片進行三維變換以將圖片放大並進行過渡。當我懸停時，問題就出現了，而且它應該在轉換完成後消失，除非鼠標在仍然懸停時移動。當鼠標懸停但不移動時，轉換後的圖像不會保持可見狀態？

我已經嘗試過這些事情，以確保沒有閃爍：

transform: translateZ(0); 
    -webkit-transform: translateZ(0);

和

-webkit-backface-visibility: hidden; 
    backface-visibility: hidden;

但沒有什麼是固定的。

來源

2017-08-10 Robofan

我看了你的代碼，你不需要設置transform3D和縮放3D，只需使用變換和縮放。所以你的圖片在懸停時不會隱藏 –

您需要重新定義你的CSS爲：

div.regionarticle figure:hover, div.regionarticle figure:active { 
    width: 30%; 
    float: right; 
    transform: translate3d(-180px, 80px, 0px) scale(2, 2); 
}

您目前有scale3d（2,2，0），但doesn't exist。

來源

2017-08-10 07:36:55 Gerard

CSS :hover只能在鼠標仍在鼠標懸停元素時運行，這是如何工作的。

如果您想通過懸停開始放大並繼續到最後，無論鼠標位置如何，您都可以使用CSS動畫。

來源

2017-08-10 08:13:00

當鼠標懸停但不移動時，轉換後的圖像不會保持可見狀態？

回答

相關問題