html - 需要将 DIV-2 粘在 DIV-1 的底部，然后在悬停时将其隐藏在 DIV-1 下方

Question

我有点迷路了。

我希望我的 .div .sticker 在 hover 上位于 .div stick-to-me 的底部

我尝试了几种方法，但从未获得理想的结果。 主要问题是，当 stick-to-me div 悬停时，它会以某种方式将 .sticker div 向下推，并且仅部分隐藏它。

你可以在这个fiddle中看到我的代码如何以及它现在的外观。很明显我没有得到想要的结果。

任何帮助或建议都会很棒。

这是我的html

.flex-row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-row:after,
.flex-row:before {
  display: none;
}

@media (max-width: 767px) {
  .flex-row {
    display: block;
  }
}


/* partners */

.mag-block {
  padding: 7px 0 120px;
}

@media (max-width: 991px) {
  .mag-block {
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .mag-block {
    padding-bottom: 40px;
  }
}

.mag-block .row {
  margin-left: -8px;
  margin-right: -8px;
}

.mag-block .row [class^="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 991px) {
  .mag-block .row [class^="col-"] {
    padding-bottom: 16px;
  }
}

.mag-block .item {
  background-color: #fff;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  border: 1px solid #d5d2d2;
  text-decoration: none !important;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  height: 137px;
  text-align: center;
  color: inherit;
}

.mag-block .item figcaption {
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 10px 8px;
}

@media (max-width: 1219px) {
  .mag-block .item figcaption {
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .mag-block .item figcaption {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .mag-block .item figcaption {
    font-size: 14px;
  }
}

.mag-block .item .logo {
  height: 50px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}

.mag-block .item .logo img {
  display: inline-block;
  vertical-align: top;
  max-height: 100%;
  max-width: 100%;
}

.mag-block .item .logo .text {
  display: block;
  font-size: 30px;
  line-height: 34px;
  font-weight: 500;
  padding: 14px 0 0;
}

.mag-block .item .more-link {
  width: 142px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  height: 0;
  overflow: hidden;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
  margin-top: -5px;
}

.mag-block .item .more-link span {
  display: block;
  padding: 7px 0 3px;
  border-top: 2px solid lightgray;
}

.mag-block .item .more-link span:before {
  content: '+ ';
  color: #c2002d;
  display: inline-block;
  vertical-align: top;
  margin-left: -20px;
  padding-right: 4px;
}

.mag-block .item:hover {
  margin: -11px -8px;
  height: 200px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.mag-block .item:hover .more-link {
  height: 50px;
}

.stick-to-me {
  position: relative;
  padding-bottom: 50px;
  z-index: 500;
}

.sticker {
  position: absolute;
  bottom: 0;
  height: 50px;
  z-index: -500;
  background-color: #eee;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="mag-block">
    <div class="row flex-row">
      <div class="col-md-3 col-sm-6 stick-to-me">

        <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner 1</strong>
            </div>
            <figcaption>small text about Partner 1 </figcaption>
          </figure>


          <footer class="more-link">
            <span>Open</span>
          </footer>

        </a>

        <div class="sticker">
          <p> Sticker </p>
        </div>

      </div>
      <!-- stick to me ends -->
      <div class="col-md-3 col-sm-6 stick-to-me">
        <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner 2</strong>
            </div>
            <figcaption> tagline Partner 2</figcaption>
          </figure>
          <footer class="more-link">
            <span>Open</span>
          </footer>
        </a>

        <div class="sticker">
          <p> Sticker </p>
        </div>


      </div>
      <!-- stick to me ends -->

      <div class="col-md-3 col-sm-6 stick-to-me">
        <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner 3</strong>
            </div>
            <figcaption>tagline Partner 3</figcaption>
          </figure>
          <footer class="more-link">
            <span>Open</span>
          </footer>
        </a>

        <div class="sticker">
          <p> Sticker </p>
        </div>

      </div>
      <!-- stick to me ends -->


      <div class="col-md-3 col-sm-6 stick-to-me">
        <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner 4</strong>
            </div>
            <figcaption>tagline Partner 4</figcaption>
          </figure>
          <footer class="more-link">
            <span>Open</span>
          </footer>
        </a>

        <div class="sticker">
          <p> Sticker </p>
        </div>

      </div>
      <!-- stick to me ends -->
    </div>
  </div>
  <!-- mag-block -->

Answer 1

我简要地查看了您的代码，我的建议是将此 lin 添加到您的 css 中。我在你的 fiddle 中进行了编辑，它有效。我相信它接近您的需要。

如果您需要，我可以在下类后为这个答案添加更多细节。

 .stick-to-me:hover{
        padding-bottom: 0px;
        }