Question

您好我在我的网站上添加了一个图像列表，其中两个图像在悬停时淡入淡出。但出于某种原因，它忽略了＆＃34; col-md-3 col-sm-3＆＃34;类和走出列。我该如何解决这个问题？

<div class="container-fluid">
    <figure class="col-md-3 col-sm-3 client-item">
            <div class="fadehover">
                <img class="img-responsive thumbnail" src="images/clients/aersale.jpg" alt="">
                <img class="top img-responsive thumbnail" src="images/clients/aersale-grayscale.jpg" alt="">
              </div>
    </figure>
</div>

CSS：

.clients-list {
  margin-top: 60px;
}

.client-item {
  margin-left:  10px;
  margin-right: -20px;
  position:     relative;
}

.fadehover {
  position: relative;
 /* height: 257px; */
}

.fadehover img {
   position:           absolute;
   left:               0;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition:    opacity 1s ease-in-out;
   -o-transition:      opacity 1s ease-in-out;
   transition:         opacity 1s ease-in-out;
}

.fadehover img.top:hover {
   opacity: 0;
}

谢谢！

Answer 1

一个简单的解决方案是仅绝对定位一个img元素..在这种情况下，.top：

EXAMPLE HERE

.fadehover img.top {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

这样做时，父元素.col-md-3.col-sm-3将不再自行折叠，因为只有一个子元素绝对定位。在这个例子中，另一个img元素将定义父元素的维度，因为它仍然在文档流中 - 与绝对定位的元素不同。

使用Bootstrap进行绝对定位

1 个答案: