悬停在嵌套另一个div的div元素上不起作用

Question

我有一个类别为 button-wrapper 的div，它包含另一个类别为 button 的div。将 button-wrapper div悬停在其上时，应该将其填充从 8px 增加到 16px ，以便 button div的大小会减小。但是，当我将鼠标悬停在 button-wrapper 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）。

我还positioned .content类使z-index工作。

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>