Question

我正在建立一个网站，只是为了加强我的技能，我制作了一些动画鼠标悬停div。当鼠标悬停时，所有这些都可以正常工作，但是左上角似乎正在向下推动它。

以下是一些图片和我的代码：

http://imageshack.us/photo/my-images/39/werwe1.png/

http://imageshack.us/photo/my-images/18/werwe2.png/

我的代码：

*{
margin: 0px;
padding: 0px;
}

h1 {
font: bold 20px Prisoner SF
}

header, section, footer, aside, nav, article, hgroup{
   display: block;
}

#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
margin-left: auto ;
margin-right: auto ;
}

body{
width: 100%;
margin: 0;
display:-webkit-box;
-webkit-box-pack: center;

} 

#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}

#main_section{
width: 600px;
height: 450px;
border: 4px solid black;
padding: 5px;
margin: 10px;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

#sidebar {
width: 500px;

}

.subsection1{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection2{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection3{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

.subsection4{
width: 200px;
height: 200px;
border: 4px solid black;
padding: 5px;
margin: 10px;
float: left;
-webkit-box-flex: 1;
-webkit-transition: -webkit-transform 2s, border 2s, scale 2s,
}

#main_section:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection1:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection2:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection3:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

.subsection4:hover{
-webkit-transform: scale(1.05);
border: 5px solid yellow;
}

/* End Section Code */

/* Footer Code */

#footer{
text-align: center;
}

/* End Footer Code */

Answer 1

当你将鼠标悬停在左上角的b / c时，你将它缩放5％

-webkit-transform: scale(1.05);

并且由于你将所有这些盒子浮动，当你缩放左上角的那个盒子时，它会超过底部一个盒子的宽度，所以它会跳到右下方框的下方。

在数学术语中，这些框包含在.sidebar中，没有设置高度，因此它只采用相同的.main_div = 450px高度。如果你进行数学计算，你会看到如果你将左上方的框缩放5％（（200 + 10）* 1.05 = 210）并将其添加到底部（那么你还需要添加填充和边距）），你会看到总数将超过450px，所以跳跃发生了。

要证明我所说的你可以尝试减少左上角的高度来说，150px（而不是200px），你会看到悬停在它上面不再碰到下面的那个到底部。

简而言之，浮动元素必须适合包含div。如果他们不这样做，他们就会开始跳跃

更新

经过进一步的研究，事实证明问题不在于盒子的高度变得比我之前声称的容器大了......而是因为你对浮动元素使用不同的高度。浮动元素如果具有不同的高度则不能很好地工作。（您将在css the missing manual中的第211页看到与您的完全相同的详细示例。

证明我的观点..执行以下操作来调试正在进行的操作：

on chrome右键单击窗口并转到inspect element
转到div .subsection1并将其高度更改为210px
- 您会看到它下方的框下降，这会再现您的问题
现在也将.subsection2的高度更改为210px。
- 你会看到倒下的盒子回到原来的位置..
如果您更改.subsection3和.subsection4的高度，您会注意到没有任何变化（即没有任何框下降等）
- 这证明了具有不同高度浮动的元素会导致不可预测或未定义的行为......所以这是一种应该避免的情况

最终说明：

通过试验和错误学习css就像你正在做的那样好..但我强烈建议你遵循一个结构化的书（就像我链接到的那样）.css可能非常不直观和令人沮丧，你可以轻松地建立根据您的试错结果得出错误的结论。

将鼠标悬停在一个div上太远了

1 个答案: