html - 当 css 有缺陷时，div-box 会闪烁

Question

我正在尝试使用 CSS-3 样式在基本 HTML 画廊中制作 hover image-zoom 效果。每 5 个框总是在鼠标悬停时闪烁。任何人都可以帮助指出错误代码在哪里...在此先感谢您。

CSS:

body {
    margin-top: 100px;
    margin-bottom: 100px;
}
#container {
    width:738px;
    height:600px;
    margin: 0 auto;
}

#ex2 img{
    height: 88px;
    width: 120px;
    margin: 0 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#ex2 img:hover {
    height: 189px;
    width: 258px;
    margin-left: 0px;
}

HTML:

<div id="container">
    <div id="containerEx2">
        <div id="ex2">
            <img src="images2/dm1_large.jpg"/>
            <img src="images2/dm2_large.jpg"/>
            <img src="images2/dm3_large.jpg"/>
            <img src="images2/dm4_large.jpg"/>
            <img src="images2/dm5_large.jpg"/>
            <img src="images2/dm6_large.jpg"/>
            <img src="images2/dm7_large.jpg"/>
            <img src="images2/dm1_large.jpg"/>
            <img src="images2/dm2_large.jpg"/>
            <img src="images2/dm3_large.jpg"/>
        </div>
    </div>
</div>

Answer 1

我建议您将图像分成 2 行，提供的所有其他答案都会导致 firefox 中的闪烁问题。您仍然需要增加容器的宽度，但是如果您有 2 行，第 6 个图像将不会跳上一行。我还将 id 将您的图像分组到 classes 中以便于在您的 css 中使用:

HTML:

<div id="container">
    <div id="containerEx2">
        <div class="ex2"> <!-- `id` has become a `class` -->
            <img src="images2/dm1_large.jpg" />
            <img src="images2/dm2_large.jpg" />
            <img src="images2/dm3_large.jpg" />
            <img src="images2/dm4_large.jpg" />
            <img src="images2/dm5_large.jpg" />
        </div>
        <div class="ex2"> <!-- `id` has become a `class` -->
            <img src="images2/dm6_large.jpg" />
            <img src="images2/dm7_large.jpg" />
            <img src="images2/dm1_large.jpg" />
            <img src="images2/dm2_large.jpg" />
            <img src="images2/dm3_large.jpg" />
        </div>
    </div>
</div>

CSS:

body {
    margin-top: 100px;
    margin-bottom: 100px;
}
#container {
    width:800px; /* ensuring 5th image remains on the 1st line */
    height:600px;
    margin: 0 auto;
}
.ex2 img { /* changed #ex2 (hash) to .ex2 (dot) */
    height: 88px;
    width: 120px;
    margin: 0 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
.ex2 img:hover { /* changed #ex2 (hash) to .ex2 (dot) */
    height: 189px;
    width: 258px;
    margin-left: 0px;
}

fiddle 演示:http://jsfiddle.net/N3nLq/2/