Question

我有一个带缩略图和摘录的小链接，使用css过渡我希望缩略图在悬停时淡出，并显示摘录。我正在使用％反对像素，因为我希望我的网站响应，但是当我将其添加到我的网站时，摘录是分散在页面的宽度，因为它具有绝对定位，下面是一个jfiddle，任何人都可以帮助我吗？

.col {
    width:29%; 
    margin:0 auto;
}
.post-thumbnail {
    position:relative;  
    float:left; 
    overflow:auto; 
    width:100%; height:278px; 
    background:#2F3B45;
}
    .post-thumbnail img {
    width:100%; height:223px; 
    padding:0; margin:0;
    transition:opacity 0.3s ease-in-out;
   -moz-transition:opacity 0.3s ease-in-out;
   -webkit-transition:opacity 0.3s ease-in-out;
   -o-transition:opacity 0.3s ease-in-out;
}
.col:hover .post-thumbnail img {
    opacity:0;
    filter:alpha(opacity=00);
}
.post-excerpt {
    width:100%;
    z-index:9999;
    opacity:1; 
    filter:alpha(opacity=1);
}
.post-excerpt p {
    text-align:justify;
    color:#a3aaac;
    font-family:'Open Sans', helvetica, arial, sans-serif;
    font-size:9pt; font-weight:200;      
    line-height:18pt;
    text-decoration:none; width:100%;
}
.col:hover .post-excerpt {
    opacity:1; 
    filter:alpha(opacity=1);
}
.post-title {
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:55px; 
    background:#ff0000; z-index:9999;
    text-align:center; line-height:52px;
}
.post-title a {
    font-family:'Open Sans', helvetica, arial, sans-serif;
    font-size:10pt; font-weight:200;  
    color:#000; text-decoration:none;
}
.post-more {
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:0px; 
    background:#ff0000;
    opacity:0.0;
    filter:alpha(opacity=00);
}
.col:hover .post-title {
    cursor:pointer;
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:95px; 
    background:#ff0000; line-height:44px;
}
.col:hover .post-more {
    cursor:pointer;
    position:absolute; 
    bottom:0px; left:0px; 
    width:100%; height:47px; 
    background:#fff url(http://liamhodnett.com/img/new/read-entry.png)top left no-repeat;  
    z-index:99999;
}

http://jsfiddle.net/P3k9A/

谢谢你们！

Answer 1

将父级设置为relative，然后将子级设置为absolute。

以下是我改变的内容：

.col {
    width:29%; 
    margin:0 auto;
    position:relative; /* <- here */
}
.post-thumbnail {
    position:absolute;  /* <- here */ 
    top: 0px;
    float:left; 
    overflow:auto; 
    width:100%; height:278px; 
    background:#2F3B45;
}
.post-excerpt {
    position: absolute; /* <- here */
    width:100%;
    z-index:9999;
    opacity:0; 
    filter:alpha(opacity=0);
}

我相信这就是你所追求的：http://jsfiddle.net/P3k9A/1/

（我还在小提琴的摘录中将不透明度更改为0。）

保持div绝对，但也在其父

1 个答案: