时间戳

首页 > 解决方案 > 我怎样才能让我的整个 div 周围有阴影？

html - 我怎样才能让我的整个 div 周围有阴影？

问题描述

对于我的网站，我想在我的网站上展示一些产品，当您将鼠标悬停在这些产品上时，应该会有更多信息。目前产品卡的设计在那里。我有 2 个问题无法开始工作。

  1. 当我将鼠标悬停在它周围时，我无法在整个 div 周围获得阴影框。试图为我的 div 添加一个高度，但这弄乱了我其他 div 的布局。我究竟做错了什么？

  2. 我的 div 的边框也穿过我的按钮（至少是我设置为按钮的链接）。我怎样才能解决这个问题？

.home-products {
  width: auto;
  height: 250px;
}

.product-image-home {
  height: 200px;
}

.product-grid {
  position: relative;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 0.6em 2em;
  margin-top: 5px;
  text-decoration: none;
  text-align: center;
}

.product-grid:hover {}

.product-info {
  display: none;
  position: absolute;
  width: 225px;
  position: absolute;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

.product-info p {
  margin-left: 7px;
  margin-right: 7px;
}

.product-grid:hover .product-info {
  display: block;
}

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
<div class="home-products">
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>Some information about the product!</p>
      <a href="www.mysite.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

你的很多问题都来自.product-info于position: absolute;. 所以删除它（他们两个，你position: absolute;有两次）；然后你可以添加一些padding-bottom来.product-grid“适合”你的按钮在div.

看看我在这里做了什么：

.home-products {
  width: auto;
  height: 250px;
}

.product-image-home {
  height: 200px;
}

.product-grid {
  position: relative;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
  text-align: center;
  width: 225px;
  padding-bottom: 15px;
}

.product-grid h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}

.product-overlay-button {
  background: #85bf31;
  height: 550px;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 0.6em 2em;
  margin-top: 5px;
  text-decoration: none;
  text-align: center;
}

.product-grid:hover {}

.product-info {
  display: none;
  width: 225px;
  text-align: center;
  float: left;
  margin-left: 3px;
  margin-right: 3px;
}

.product-info p {
  margin-left: 7px;
  margin-right: 7px;
}

.product-grid:hover .product-info {
  display: block;
}

.product-grid:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
<div class="home-products">
  <div class="product-grid">
    <img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
    <h3>Bloodrage</h3>
    <span>€38.90</span>
    <div class="product-info">
      <p>Some information about the product</p>
      <a href="www.mysite.com" class="product-overlay-button">Vergelijk prijzen</a>
    </div>
  </div>
</div>

推荐阅读