Question

我想在页面上设置一个方形div（红色框）默认情况下。当用户将鼠标悬停在其上时，第二个div应显示为半透明的黑色背景和一些文本/内容。我试图在他的网站上模仿Devon Stank's project section。

我现在的代码增加了默认方形红框的高度，第二个div没有覆盖整个红框。代码有什么问题？

＆＃13;

.project-box {
  position: relative;
  width: 30%;
  padding-top: 30%;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  background-color: red;
}

.hover-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30%;
  overflow: hidden;
  display: inline-block;
}

.default-hover {
  opacity: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

.default-box:hover .default-hover {
  opacity: 1;
}

＆＃13;

<div class="default-box project-box">
  <div class="default-hover hover-content">hello</div>
</div>

＆＃13;

Answer 1

如果未定义父级height: 100%;，

height将不会对该元素起作用此外，如果您坚持position: relative并在父级上加padding，则无法完全覆盖。

如果您想覆盖所有.project-box（父级），无论其padding值是什么，我建议你对孩子使用absolute定位：
（我是通过添加新课程.veil完成的，但可以在现有课程中完成）

.project-box {
  position: relative; /* ADDED so that the absolute positioning refers to this parent */
  width: 30%;
  padding-top: 30%;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  background-color: red;
}

.hover-content {
  /* REMOVED position and sizes */
  padding-top: 30%;
  overflow: hidden;
  display: inline-block;
}

.default-hover {
  opacity: 0;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

.default-box:hover .default-hover {
  opacity: 1;
}


/* ADDED this class */
.veil {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="default-box project-box">
  <!-- Added a class for the child here -->
  <div class="default-hover hover-content veil">hello</div>
</div>

希望它有所帮助。

Answer 2

这是因为您在主容器上定义了padding-top，因为主容器没有指定高度，内部元素上的height:100%也不起作用。

您可以将填充保留在内部元素内和/或增加它：

＆＃13;

.project-box {
  width: 30%;
  margin-right: 20px;
  margin-bottom: 15px;
  display: inline-block;
}

.default-box {
  background-color: red;
  text-align:center;
}

.hover-content {
  padding-top: 30%;
  padding-bottom: 30%;
}

.default-hover {
  opacity: 0;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

.default-box:hover .default-hover {
  opacity: 1;
}

＆＃13;

<div class="default-box project-box">
  <div class="default-hover hover-content">hello</div>
</div>

＆＃13;

Answer 3

在这里，它可以帮到你，尝试一下。

.project-box {
position: relative;
width: 30%;
height:100%
}

.default-box {
 background-color: red;
 }

.hover-content {
 position: relative;
 width: 100%;
 height: 100%;
 text-align:center;
 padding-top: 30%;
 }

我怎样才能让div覆盖整个背后的div？

3 个答案: