主页 / 问题 / 1044837
Accepted
Родион Поляков
Asked:2020-11-11 20:51:19 +0000 UTC2020-11-11 20:51:19 +0000 UTC

2 个并排有阴影的方块

  • 772

如何使阴影不会越过另一个街区？谢谢你。

html

<div class="col-sm-6 col-lg-4 col-xl-3">
    <img class="img-fluid" src="img/cover.jpg" data-src="img/Аметист.jpg">
    <div class="d-flex justify-content-between">
        <div class="info">
            <p class="mb-0">Аметист</p>
            <p class="mb-0">19.99 грн.</p>
        </div>
        <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
    </div>
    <div class="info-xl">
        1
    </div>
</div>

css

.col-xl-3:hover {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    z-index: 1;
}

.col-xl-3:hover .info-xl {
    display: block;
}

.info-xl {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    border-top: 1px solid #dee2e6;
}

在此处输入图像描述

html

1 个回答

  1. Best Answer

    保持一点重新输入，我想你会理解链接！

    <div class="row">
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4 col-xl-3">
    <div class="item">
      <div class="item--wrap">
        <img class="img-fluid" src="http://via.placeholder.com/350x150" data-src="img/Аметист.jpg">
        <div class="d-flex justify-content-between">
            <div class="info">
                <p class="mb-0">Аметист</p>
                <p class="mb-0">19.99 грн.</p>
            </div>
            <button class="btn btn-outline-dark align-self-center" onclick="Chatra('openChat', true);">Купить</button>
        </div>
        <div class="info-xl">
            1
        </div>
      </div>
    </div>
  </div>
</div>

.item:hover {
    z-index: 1;
    position:absolute;
    top:0;
    left: 15px;
    right: 15px;
}
.item:hover:before {
  content: '';
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  top:0;
  left:-15px;
  right: -15px;
  height: 100%;
}
.item--wrap {
  position: relative;
}
.item:hover .info-xl {
    display: block;
    position: relative;
}

.info-xl {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
}

.row {
  width: 1024px;
  background: #ededed;
}
    • 2

相关问题