Question

有四个项目只显示一个bg图像，直到你移动然后它显示文本，bg图像然后设置为无。

第一个元素正在扩展超过其他三个元素的高度。我真的只是希望他们都能保持在200x200px。用于背景的所有图像都是200x200px。

.p1top应该以不同的方式定位，例如绝对吗？

.p1top {
    height:200px;
    margin-left:45px;
    background-repeat: no-repeat;
    background-image: url(protect.png);
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p1top :hover {
    height:200px !important;
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top :hover {
    width:200px;
    background-image:none;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p2top {
    background-repeat: no-repeat;
    background-image: url(build.png);
    float:left;
    margin-left:-15px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
 .p3top {
    background-repeat: no-repeat;
    background-image: url(savebg.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p3top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}
.p4top {
    background-repeat: no-repeat;
    background-image: url(help.png);
    margin-left: -20px;
    width:200px;
    text-align:center;
    background-color:transparent;
    line-height: 0px;
    color: transparent;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.p4top :hover {
    width:200px;
    background-color:#7D8093;
    line-height: 20px;
    color: #FFFFFF;
}

Answer 1

您仅在.p1top中定义了高度，但在其他div中没有定义高度，因此您还需要设置div高度。然后你可以定义绝对位置，但为此你应该用相对的div来包装所有这些div。如果你发布一个非常明智的jsfiddle。

第一个div超出指定大小？

1 个答案: