hover没有处理嵌套另一个div的div元素

Question

我有一个带有类按钮包装器的div，它包含另一个带有类按键的div钮包装器div应该在悬停时将其填充从8px增加到16px键的大小减小。但是，当我将鼠标悬停在按钮包装器div上时，它没有响应

代码托管在mos.epizy.com.网站上

这是我的代码：

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.background,
.underlay,
.overlay,
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
}
.overlay,
.cover {
display: none;
}
.background {
z-index: 0;
background-image: url("images/shards.jpg");
background-size: cover;
min-width: 100%;
min-height: 100%;
}
.underlay {
z-index: 1;
height: 100%;
}
.content {
z-index: 2;
padding-top: 20px;
}
.overlay {
z-index: 3;
}
.cover {
z-index: 4;
}
.menu {
width: 100%;
}
.button-wrapper {
padding: 8px;
float: left;
box-sizing: border-box;
height: 150px;
}
.button {
width: 100%;
height: 100%;
opacity: .9;
transition: 1s;
}
.row-1 {
width: 33.3%;
}
.row-2 {
width: 66.6%;
}
.row-3 {
width: 100%;
}
.button-wrapper:hover {
padding: 16px;
}
.red {
border: 1px solid red;
background: red;
}
.blue {
border: 1px solid blue;
background: blue;
}

<div class="background"></div>
<div class="underlay"></div>
<div class="content">
<div class="menu">
<div class="button-wrapper row-1">
<div class="red button">1/3</div>
</div>
<div class="button-wrapper row-2">
<div class="red button">2/3</div>
</div>
<div class="button-wrapper row-3">
<div class="red button">1</div>
</div>
<div class="button-wrapper row-1">
<div class="blue button">1/3</div>
</div>
<div class="button-wrapper row-2">
<div class="blue button">2/3</div>
</div>
<div class="button-wrapper row-3">
<div class="blue button">1</div>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="cover"></div>

Answer 1

我已经调整了您的代码，并记录了代码本身的更改。最重要的变化是使用flexbox来显示相邻的列(行已重命名为col(。

我还定位了.content类以使z索引工作。

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.background,
.underlay,
.overlay,
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
}
.overlay,
.cover {
display: none;
}
.background {
z-index: 0;
background-image: url("images/shards.jpg");
background-size: cover;
min-width: 100%;
min-height: 100%;
}
.underlay {
z-index: 1;
height: 100%;
}
.content {
position: relative; /* Added to make z-index work */
z-index: 2;
padding-top: 20px;
}
.overlay {
z-index: 3;
}
.cover {
z-index: 4;
}
.menu {
width: 100%;
display: flex; /* Added */
flex-wrap: wrap; /* Added */
}
.button-wrapper {
padding: 8px;
/* float: left; REMOVED */
box-sizing: border-box;
height: 150px;
}
.button {
width: 100%;
height: 100%;
opacity: .9;
transition: 1s;
}
.col-1 {
width: 33.3%;
}
.col-2 {
width: 66.6%;
}
.col-3 {
width: 100%;
}
.button-wrapper:hover {
padding: 16px;
}
.red {
border: 1px solid red;
background: red;
}
.blue {
border: 1px solid blue;
background: blue;
}

<div class="background"></div>
<div class="underlay"></div>
<div class="content">
<div class="menu">
<div class="button-wrapper col-1">
<div class="red button">1/3</div>
</div>
<div class="button-wrapper col-2">
<div class="red button">2/3</div>
</div>
<div class="button-wrapper col-3">
<div class="red button">1</div>
</div>
<div class="button-wrapper col-1">
<div class="blue button">1/3</div>
</div>
<div class="button-wrapper col-2">
<div class="blue button">2/3</div>
</div>
<div class="button-wrapper col-3">
<div class="blue button">1</div>
</div>
</div>
</div>
<div class="overlay"></div>
<div class="cover"></div>