chrome transition閃爍BUG

前段時間寫鼠標懸停元素上移效果時，當鼠標剛好放在元素邊緣時，chrome出現一直上下移動的問題，其餘瀏覽器表現正常。緣由尚不知，多是實現方式不對吧（PS：使用top實現），雖然不知道緣由，可是問題仍是要解決的，分享一個能繞開的實現方式。

    說到鼠標懸停元素上移，首先想到的是鼠標懸停時元素上移，而後應用transition來實現漸變效果。

    一、使用top實現（該實現方式chrome瀏覽器閃爍，避免使用）

<!--html--> <div class="test"></div> /*css*/ .test { position: relative; top: 0; transition: top 0.5s; } .test:hover{ top: -10px; }

    二、使用transform實現（推薦）

<!--html--> <div class="test"></div> /*css*/ .test { transform: translateY(0); transition: transform 0.5s; } .test:hover{ transform: translateY(-10px); }

AD： 魔道祖師小說