我希望我的“框” -div悬停时显示“出现” -div。除非div不在下，否则其他“框” -div应保持原样。因此，如果我将鼠标悬停在顶部的4个“框” -div之一中，则其他8个div应向下移动，因此红色蝴蝶结有空间。
的HTML
<body>
<div class="beholder">
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
</div>
<div class="beholder">
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
<div class="beholder_lille">
<div class="box"></div>
<div class="appear"></div>
</div>
</div>
</body>
的CSS
.beholder {
width: 50%;
display:table;
margin: 0 auto;
}
.beholder_lille {
background-color: green;
float: left;
margin:0 4%;
margin-bottom: 30%;
}
.box , .appear{
background: blue;
height: 100px;
width: 100px;
float:left;
}
.appear{
background:red;
float: left;
display: none;
clear: both;
height: 600px;
width: 600px;
}
.box:hover{
background: #e6e6e6;
}
.box:hover + .appear {
display:block;
}
真的希望一些策划者能帮助我
好的，我使用javascript（jQuery）进行了摆弄。每次你悬停在.box元素，它计算的高度差.beholder和.appear与设置这种差异为margin-bottom来.beholder。如果高度差小于零，则从函数返回。您可以将我的下边距var adjust设置为20 ...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句