代码之家 › 专栏 › 技术社区 › Slowboy

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

twitter-bootstrap css html

Slowboy · 技术社区 · 6 年前

我有点迷路了。

我要我的部门 .sticker 在div的底部 stick-to-me 在 hover

坚持住我 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 -->

2 回复 | 直到 6 年前

DaudiHell 6 年前

我简单地看了一下你的代码,我的建议就是把这个lin添加到你的css中。我在你的小提琴里编辑过,很管用。我相信它接近你所需要的。

如果你需要的话,我可以在下班后补充更多细节。

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

Anil K. 6 年前

你应该试试这个

.stick-to-me { padding-bottom:0px; min-height:137px; }
.stick-to-me .item { width:100%; height:100%; min-height:137px; position:absolute; top:0px; left:0px; }
.sticker { bottom:-50px; }