奇怪的悬停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

回答

相关问题