hover не работает над элементом div, который вкладывает другой div

Question

У меня есть div с классом button-wrapper , и он содержит еще один div с классом button . * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Обертка кнопки div не увеличит свой отступ с 8px до 16px , когда наведено, так что button div уменьшается в размере , Однако кнопка-оболочка 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-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>