Img在改變不透明度時移動：hover

所以我有一個div裏面有一個圖像，我想從0.7開始不透明並在懸停時變爲1，但我遇到了一個明顯的錯誤，其中圖像移動1px或當我更改懸停時的不透明度時，會減小1px（我無法確定哪個）。
這顯然是一個已知的錯誤，但其他問題中的修復都沒有爲我工作。我曾嘗試設置backface-visibility：hidden;並進行轉換，但錯誤依然存在。Img在改變不透明度時移動：hover

這個bug有什麼新的解決方案嗎？

.collapse img { 
    width: 100%; 
    margin-top: -90px; 
    margin-left: 75px; 
    opacity: 0.7; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(0) scale(1.0, 1.0); 
    border:none; 
} 
.collapse:hover img { 
    width: 100%; 
    opacity: 1; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(0) scale(1.0, 1.0); 
    border:none; 
}

感謝，亞當

編輯 - JS小提琴 - http://jsfiddle.net/wfe70gd1/6/

活生生的例子可以在這裏看到（下方圖表右列） - http://mmdoc.ajhtestserver.com/decks/1/

而且只出現將發生在Firefox

來源

2014-08-31 Adam Hollow

Wheres the code？ – Havenard 2014-08-31 17:45:56

我已經看到過這種情況發生了幾次，你有沒有試圖確保你的圖像是浮動的？如果你還沒有，也可以嘗試指定圖像尺寸。一些代碼可能會幫助我們 – robobobobo 2014-08-31 17:46:27

需要JSfiddle來演示'bug'會有幫助。 – 2014-08-31 18:48:27

你想添加backface-visibi lity選擇器到你的父類（.collapse）。您還需要包含選擇器的Mozilla版本。也不會傷害到包括Opera在內。

-backface-visibility: hidden; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
-webkit-transform: translateZ(0) scale(1.0, 1.0);

來源

2014-09-05 23:06:17

我認爲這工作。我之前嘗試了背面技巧，但也許我沒有嘗試與前綴。無論如何謝謝你 – 2014-09-06 01:59:04

如果這對你有用，請接受我的答案。謝謝！ – 2014-09-07 01:51:34

第一行不應該在它之前有一個'-'： – Gavin 2017-08-28 18:04:21

Img在改變不透明度時移動：hover

回答

相關問題