0

有四个项目仅显示背景图像，直到您悬停然后显示文本，然后将背景图像设置为无。

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

.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;
}
4

1 回答 1

0

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

于 2013-08-09T03:18:03.687 回答