奇怪的懸停Bug

我有一個響應式圖像模式框。奇怪的懸停Bug

Code:

http://jsfiddle.net/YCcNY/34/

在這裏面，當你停在圖片變得更大。有時，當懸停在第一行的最後一張圖片上時，格式會中斷。如果它不適合您調整窗口大小。

有誰知道如何解決這個問題？

來源

2012-12-04 CSS - code

現在很好用！非常感謝大家！ –

佐爾坦的答案是非常好的。您也可以考慮使用CSS變換進行縮放。圖像會有些模糊，但好處在於，變換不會影響圖像的實際大小，而只會影響渲染的方式。

li:hover img { 
    -moz-transform: scale(1.1); 
}

來源

2012-12-04 18:53:17

哦..好容易！我沒有想到規模！非常感謝！我將通過佐爾坦的答案選擇這一個，因爲它也適用於響應模態。一個小提示：爲了防止它變得模糊，我只會從0.9開始，然後將鼠標懸停在1.0;） –

這是沒有高度的浮動元素的正常行爲。爲了解決這個問題給出一個固定的高度，以您的li項目 - DEMO

.PhotoContent li { 
    width: 20%; 
    height: 100px; /* THIS */ 
    float: left; 
    font-weight: 200; 
    clear:none; 
    color: rgb(150,150,150); 
    cursor: pointer; 
    outline: 0px solid green; 
}

來源

2012-12-04 18:08:31

我無法將高度設置爲設置值，因爲模式需要響應，而li相對於圖片，調整窗口的寬度並使其中斷。但是，無論如何。我會給你一個upvote，但沒有足夠的代表。 –

奇怪的懸停Bug

回答

相關問題