jquery - 使用 Bootstrap 进行绝对定位

Question

您好，我正在向我的站点添加一个图像列表，其中有两张图像在悬停时逐渐消失。但出于某种原因，它忽略了“col-md-3 col-sm-3”类并超出了列。我该如何解决这个问题？

<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 元素将定义父元素的尺寸，因为它仍在文档流中 - 与绝对定位元素不同。