html - 在悬停时调整卡片大小会使下方的 div 跳转

标签 html css twitter-bootstrap css-transitions

我在悬停时调整 .main-partners div 中卡片的大小，以便出现 查看更多 按钮。

我的问题是当我 :hover 在 .main-partners 中的卡片 (.main-card) 上时 .partners 行中的 >divs 被下推。

这不是我想要的效果。我希望所有卡片和 div 在调整大小时保持原位。

我整个上午都在尝试通过来回更改 .css 来解决这个问题。我现在没有希望了。

任何人都可以看看这个，看看我错过了什么。 这是一个链接 fiddle

下面是我的代码

.card {
  border-radius: 0; }
  .card .card-img-top {
    border-radius: 0; }


@media (max-width: 767.98px) {
  .card {
    margin-top: 2vh; } }

.main-partners {
  padding: 7px 0 40px; }
  .main-partners .row {
    margin-left: -8px;
    margin-right: -8px; }
    .main-partners .row [class^="col-"] {
      padding-left: 8px;
      padding-right: 8px; }

.main-card {
  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;
  text-align: center;
  color: inherit; }
  .main-card .card-text {
    color: #4b4b4b; }
  .main-card .more-link {
    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; }
    .main-card .more-link span {
      color: #4b4b4b;
      display: block;
      padding: 7px 0 3px;
      border-top: 1px solid lightgray; }
      .main-card .more-link span:before {
        content: '+ ';
        color: #c2002d;
        display: inline-block;
        vertical-align: top;
        margin-left: 0px;
        padding-right: 4px; }
  .main-card:hover {
    margin: -11px 0px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
    .main-card:hover .more-link {
      height: 31px; }

/* partners */
.partners {
  padding: 7px 0 120px; }
  .partners .row {
    margin-left: -8px;
    margin-right: -8px; }
    .partners .row [class^="col-"] {
      padding-left: 8px;
      padding-right: 8px; }
  .partners .item {
    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; }
    .partners .item figcaption {
      font-size: 16px;
      line-height: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 2px 10px 8px; }
    .partners .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; }
      .partners .item .logo img {
        display: inline-block;
        vertical-align: top;
        max-height: 100%;
        max-width: 100%; }
      .partners .item .logo .text {
        display: block;
        font-size: 24px;
        line-height: 34px;
        font-weight: 500;
        padding: 14px 0 0; }
    .partners .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; }
      .partners .item .more-link span {
        display: block;
        padding: 7px 0 3px;
        border-top: 1px solid lightgray; }
        .partners .item .more-link span:before {
          content: '+ ';
          color: #c2002d;
          display: inline-block;
          vertical-align: top;
          margin-left: -20px;
          padding-right: 4px; }
    .partners .item:hover {
      margin: -11px -8px;
      height: 159px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
      .partners .item:hover .more-link {
        height: 31px; }

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

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

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

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

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

@media (max-width: 767px) {
  .partners .item figcaption {
    font-size: 14px; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main-partners"> 

  <div class="row flex-row">
    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>


     

    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>


    <div class="col-sm-12 col-md-4">
      <a href="#" class="main-card">
      <div class="card">
        <img class="card-img-top" src="#" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..</p>
            <footer class="more-link">
              <span>See more</span>
            </footer>
          </div>
      </div>
        </a>
    </div>
  </div>
</div>




  <div class="container">

  <div class="partners">
<div class="row flex-row">
    <div class="col-lg-3 col-md-6">
       <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">
            <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">	     
    <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
    <div class="col-lg-3 col-md-6">
      <a href="#" class="item">
          <figure>
            <div class="logo">
              <strong class="text">Partner</strong>
            </div>
            <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
          </figure>
          <footer class="more-link">
            <span>see more</span>
          </footer>
        </a>
    </div>
</div>
</div>
<!-- partners -->

    <!-- / event-area -->
</div>

最佳答案

.main-partners 需要遵循与 .partners 相同的模式。创建一个新的 div 并在其中添加 .main-partners。在带有 .main-partners .card: hover 的 CSS 中使用它，它现在可以工作了。 这是 Fiddle链接

关于html - 在悬停时调整卡片大小会使下方的 div 跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57536465/

上一篇：html - 如何将幻灯片指示器放在左上角

下一篇：jquery - 如何使用包装 div 更改不透明度为 1 的内部 div 的颜色

相关文章：

html - 水平对齐缩略图

javascript - 如何从 JSON 对象解析 HTML 标签

jquery - 背景点击事件适用于一切 - 修复？

javascript - ng2-split-pane 在初始渲染后调整垂直 Pane 的高度

jquery - 如何使此容器响应(移动/小型设备)- Bootstrap 3

javascript - Angular 自定义复选框指令在 ng-repeat 中不起作用

html - 表格单元格中的非均匀虚线边框

html - 背景颜色不会覆盖文本 div

jquery - 有没有一种方法可以根据在内容中找到的 anchor 自动用内容填充导航栏？

asp.net - 我不断收到 "' MsAjaxBundle' 不是有效的脚本名称。该名称必须以 '.js' 结尾。 “在尝试构建我的项目时

©2024 IT工具网  联系我们