默认情况下,我尝试在页面上显示一个方形的div (红色方框)。当用户将鼠标悬停在它上面时,第二个div应该以半透明的黑色背景和一些文本/内容显示。我试着在他的网站上模仿Devon Stank's project section。
我现在的代码增加了默认正方形红色框的高度,第二个div没有覆盖整个红色框。代码有什么问题?
.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;
}
<div class="default-box project-box">
<div class="default-hover hover-content">hello</div>
</div>
发布于 2018-05-28 20:04:39
如果未定义父元素的height
,则height: 100%;
将不会对元素起作用。
此外,如果您坚持在父级上使用带有padding
的position: relative
,您将无法涵盖所有内容。
如果您想覆盖所有的父对象( .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>
希望能有所帮助。
发布于 2018-05-28 20:34:33
这里,它可能会对你有帮助,试试吧。
.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%;
}
https://stackoverflow.com/questions/50565965
复制相似问题