【发布时间】：2015-05-23 23:58:27
【问题描述】：
我在玩jsfiddle时遇到了一个奇怪的问题
注意：全屏运行 sn-p（尚无响应）
$('.box').click(function () {
$('.box').toggleClass("init");
});html {
margin:0;
padding:0;
height:100vh;
background:#222;
color: cornflowerblue;
overflow-x:hidden;
font-size:18px;
}
.box {
height:100px;
width:100px;
background:rgba(0, 0, 0, 0.2);
position:absolute;
top:50%;
left:50%;
border-radius:50%;
overflow:hidden;
display:inline-block;
transition:all 1.4s 1.4s;
}
.minibox {
height:48%;
width:48%;
position:absolute;
background:gray;
transition:all 0.8s;
}
.box:hover .minibox {
transform:rotate(45deg);
}
.mini1 {
top:0;
left:0;
}
.mini2 {
top:0;
right:0;
}
.mini3 {
bottom:0;
left:0;
}
.mini4 {
bottom:0;
right:0;
}
.circ {
position:absolute;
height:80%;
width:80%;
top:10%;
left:10%;
border-radius:50%;
background:black;
line-height:80px;
text-align:center;
}
.box2 {
top:38%;
left:40%;
transition:all 0.8s 2s;
}
.box3 {
top:38%;
left:60%;
transition:all 0.8s 1.2s;
}
.box5 {
top:38%;
left:20%;
transition:all 0.8s 1.8s;
}
.box4 {
top:50%;
left:30%;
transition:all 0.8s 1.6s;
}
.box6 {
top:25%;
left:50%;
transition:all 0.8s 1s;
}
.box7 {
top:25%;
left:30%;
}
.init {
top:0;
left:0;
transition:all 0.5s
}
.init:before {
content:"Menu";
text-align:center;
line-height:80px;
background:red;
position:absolute;
z-index:8;
height:80%;
width:80%;
border-radius:50%;
top:10%;
left:10%;
background:blue;
}
.box:hover .minibox {
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">4</div>
</div>
<div class="box box2 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">7</div>
</div>
<div class="box box3 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">3</div>
</div>
<div class="box box4 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">5</div>
</div>
<div class="box box5 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">6</div>
</div>
<div class="box box6 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">2</div>
</div>
<div class="box box7 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">1</div>
</div>在父 'box' div 上设置的溢出不包含 'minibox' div - 即使我已在父级上将溢出设置为隐藏。
问题发生在：
.minibox {
height:48%;
width:48%;
position:absolute;
background:gray;
transition:all 0.8s; <--this declaration
}
删除这条线使其“工作”（显然没有我正在寻找的良好过渡），尽管我对为什么有点茫然。
在悬停时，div 元素在“做它应该做的事情”之前出现“方形”大约一秒钟 - 也就是说，然后是圆形。
什么时候应该是这样的：
有一个过渡。
知道如何解决这个溢出问题吗？
【问题讨论】：
-
这是另一个相关项目 - stackoverflow.com/questions/31693219/…
标签： css google-chrome overflow