当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

您的答案在于容器的宽度。因为它必须推出，它不能停留在同一行，因此它会将其推到下一行。因为这是必须切换的活动元素，它确实会闪烁，导致元素必须移出它的建议框的边界。

我创建了一个JSfiddle，使你的容器大100像素，使它工作得很好。

    #container {

      width:838px;
        height:600px;
        margin: 0 auto;
    }

http://jsfiddle.net/895NY/

修改

至于闪烁的部分，我不知道。我认为这是一个火狐问题，因为我在Chrome中进行了测试，并且它在我的浏览器中没有闪烁。

Answer 2

问题在于容器的宽度，你需要在悬停时增加容器的宽度，CSS中的微小变化：

#container {
    -webkit-transition:all 1s ease;
     width:620px;
     height:600px;
     margin: 0 auto;
}
#container:hover {
    width:760px;
}

这是 FIDDLE

Answer 3

我建议你将图像分成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;
}

小提琴演示：http://jsfiddle.net/N3nLq/2/