jquery - 奇怪的悬停错误

Question

我有一个带有图像的响应式模态框。

Code:

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

在其中，当您将鼠标悬停时，图像会变大。有时，将鼠标悬停在第一行的最后一张图片上时，格式会中断。如果它不适合您调整窗口大小。

有谁知道如何解决这一问题 ？

Answer 1

这是没有高度的浮动元素的正常行为。修复它给你的li物品一个固定的高度 -演示

.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;
}

Answer 2

佐尔坦的回答非常好。您还可以考虑使用 CSS 转换进行缩放。图像会稍微模糊，但好处是变换不会影响图像的实际大小，只会影响渲染的方式。

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