4

基本上我正在尝试做的是连续拥有一组图像，每当我将鼠标悬停在其中一个上时，该图像应该被放大并获得红色边框。

我为此使用 CSS 过渡。

我现在的问题是，当我将鼠标悬停在图像上时，所有周围的图像都会被向下推并稍微偏向一边。

我注意到的一件事是，如果我删除边框过渡效果会完美。

html部分非常简单：

<div id="Menu">
    <img src="img1" alt="" /> <img src="img2" alt="" /> <img src="img3" alt="" /> <img src="img4" alt="" /> <img src="img5" alt="" /> <img src="img6" alt="" /> <img src="img7" alt="" />
</div>

至于CSS：

#Menu {
    text-align:center;
    margin-top:20px;
}
#Menu img {
    position:relative;
    display:inline;
    border:none;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    z-index:1;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}
#Menu img:hover {
    position:relative;
    display:inline;
    border: 3px #C00 solid;
    border-radius: 2px;
    transform:scale(1);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1);
    z-index:10;
    transition:transform .5s, border .5s;
    -webkit-transition:-webkit-transform .5s, border .5s;
    -moz-transition:-moz-transform .5s, border .5s;
}

有什么问题，我该如何解决？

这是一个 JsFiddle 示例。

4

3 回答 3

3

你应该添加

#Menu img {
   border: 3px solid transparent;
}

解释：

如果你了解 CSS 盒子模型架构

在此处输入图像描述

边框占用元素周围而不是元素内部的空间，因此当您在悬停时使用边框时，它实际上会占用元素周围的空间并将其他元素推到一边，因此为了防止这种情况，我们使用边框来欺骗该位置具有透明的颜色。

如果你愿意，你也可以使用新的 CSS3 属性，它被称为box-sizing: border-box

完整的跨浏览器

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

这是做什么的？

边框、填充等将在框内计算，而不是在框外计算，因此如果您不需要transparent边框，也可以使用这些属性

于 2013-05-15T09:45:05.913 回答
2

简单把边框透明

#Menu img {
border: 3px solid transparent;
}

http://jsfiddle.net/N9Zdq/2/

于 2013-05-15T09:38:17.823 回答
1

小提琴

在这里看看e 你正在缩放到 1 的小提琴，他已经是。我将其更改为 1.3 :)

于 2013-05-15T09:42:30.580 回答