Question

使用CSS网格，我在网格中有按钮和一个div。该div也是一个包含更多按钮和div的网格。主网格中的按钮工作正常，但子网格中的按钮不会响应点击或悬停事件。我有一个CSS伪选择器，用于在悬停时使开始按钮上的颜色反转，但它不起作用，我有一个jQuery选择器，当你点击它时，使严格模式按钮反转颜色，并反转回到第二次点击，但它也不起作用。

＆＃13;

$(document).ready(function() {
  $(".header").html("<h1 class='text-center'>Simon</h1>");
  $(".count").html("—");
  $(".start").html("<i class='fas fa-play'></i>");
  $(".strict").html("Strict<br>Mode");

  var strict = false;

  $(".strict").click(function() {
    if (strict) {
      $(this).css("background", "#efefef");
      $(this).css("color", "#262626");
      strict = true;
    } else {
      $(this).css("background", "#262626");
      $(this).css("color", "#efefef");
      strict = true;
    }
  });
});

＆＃13;

body {
  background: #262626;
  height: 100vh;
  overflow: hidden;
}

@media (orientation: landscape) {
  div.grid.main {
    display: grid;
    width: 90vh;
    height: 90vh;
    margin: 5vh auto;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  }
}

@media (orientation: portrait) {
  div.grid.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    width: 90vw;
    height: 90vw;
    margin: auto;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  }
}

button {
  border: none;
}

.green {
  background: #15ff00;
  border: 1px solid #11cc00;
  grid-area: 1 / 1 / 1 / 3;
}

.green:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #15ff00;
  background: #11cc00;
  border: none;
}

.green:active {
  background: #15ff00;
  border: 1px solid #11cc00;
  box-shadow: none;
}

.red {
  background: #ff0000;
  border: 1px solid #cc0000;
  grid-area: 1 / 3 / 3 / 3;
}

.red:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #ff0000;
  background: #cc0000;
  border: none;
}

.red:active {
  background: #ff0000;
  border: 1px solid #cc0000;
  box-shadow: none;
}

.yellow {
  background: #fffa00;
  border: 1px solid #ccc800;
  grid-area: 2 / 1 / 4 / 1;
}

.yellow:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #fffa00;
  background: #ccc800;
  border: none;
}

.yellow:active {
  background: #fffa00;
  border: 1px solid #ccc800;
  box-shadow: none;
}

.blue {
  background: #006eff;
  border: 1px solid #0058cc;
  grid-area: 3 / 2 / 3 / 4;
}

.blue:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #006eff;
  background: #0058cc;
  border: none;
}

.blue:active {
  background: #006eff;
  border: 1px solid #0058cc;
  box-shadow: none;
}

.menu {
  z-index: -1;
  background: #262626;
  grid-area: 2 / 2 / 2 / 2;
}

div.grid.menu {
  display: grid;
  grid-template: 2fr 1fr / repeat(3, 1fr);
}

.header {
  grid-area: 1 / 1 / span 1 / span 3;
}

.count {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 7vh;
  line-height: 8vh;
}

.start {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 6vh;
  line-height: 6vh;
}

.start:hover {
  background: #262626;
  color: #efefef;
}

.strict {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 4vh;
  line-height: 4vh;
}

h1 {
  color: #efefef;
  font-size: 8vh;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title>Simon</title>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<body>
  <div class='grid main'>
    <button class='green'></button>
    <button class='red'></button>
    <button class='yellow'></button>
    <button class='blue'></button>
    <div class='grid menu'>
      <div class='header text-center'></div>
      <div class='count'></div>
      <button class='start'></button>
      <button class='strict'></button>
    </div>
  </div>
</body>

＆＃13;

Answer 1

这是一个分层问题..

从z-index

中删除.menu

.menu {
  /* z-index: -1; REMOVE THIS */
  background: #262626;
  grid-area: 2 / 2 / 2 / 2;
}

Answer 2

<强> CSS：

班级.menu有一个z-index: -1;，因为它低于所有其他元素，因此无法点击。

<强> jQuery的：

变量strict设置为true两次，因此点击只能执行一次。 （如果需要，请保持原样）

<强>段：

$(document).ready(function() {
  $(".header").html("<h1 class='text-center'>Simon</h1>");
  $(".count").html("—");
  $(".start").html("<i class='fas fa-play'></i>");
  $(".strict").html("Strict<br>Mode");

  var strict = false;

  $(".strict").click(function() {
    if (strict) {
      $(this).css("background", "#efefef");
      $(this).css("color", "#262626");
      strict = false;
    } else {
      $(this).css("background", "#262626");
      $(this).css("color", "#efefef");
      strict = true;
    }
  });
});

body {
  background: #262626;
  height: 100vh;
  overflow: hidden;
}

@media (orientation: landscape) {
  div.grid.main {
    display: grid;
    width: 90vh;
    height: 90vh;
    margin: 5vh auto;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  }
}

@media (orientation: portrait) {
  div.grid.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    width: 90vw;
    height: 90vw;
    margin: auto;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  }
}

button {
  border: none;
}

.green {
  background: #15ff00;
  border: 1px solid #11cc00;
  grid-area: 1 / 1 / 1 / 3;
}

.green:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #15ff00;
  background: #11cc00;
  border: none;
}

.green:active {
  background: #15ff00;
  border: 1px solid #11cc00;
  box-shadow: none;
}

.red {
  background: #ff0000;
  border: 1px solid #cc0000;
  grid-area: 1 / 3 / 3 / 3;
}

.red:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #ff0000;
  background: #cc0000;
  border: none;
}

.red:active {
  background: #ff0000;
  border: 1px solid #cc0000;
  box-shadow: none;
}

.yellow {
  background: #fffa00;
  border: 1px solid #ccc800;
  grid-area: 2 / 1 / 4 / 1;
}

.yellow:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #fffa00;
  background: #ccc800;
  border: none;
}

.yellow:active {
  background: #fffa00;
  border: 1px solid #ccc800;
  box-shadow: none;
}

.blue {
  background: #006eff;
  border: 1px solid #0058cc;
  grid-area: 3 / 2 / 3 / 4;
}

.blue:hover {
  z-index: 99;
  box-shadow: 0 0 3px 3px #006eff;
  background: #0058cc;
  border: none;
}

.blue:active {
  background: #006eff;
  border: 1px solid #0058cc;
  box-shadow: none;
}

.menu {
  background: #262626;
  grid-area: 2 / 2 / 2 / 2;
}

div.grid.menu {
  display: grid;
  grid-template: 2fr 1fr / repeat(3, 1fr);
}

.header {
  grid-area: 1 / 1 / span 1 / span 3;
}

.count {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 7vh;
  line-height: 8vh;
}

.start {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 6vh;
  line-height: 6vh;
}

.start:hover {
  background: #262626;
  color: #efefef;
}

.strict {
  background: #efefef;
  color: #262626;
  text-align: center;
  font-size: 4vh;
  line-height: 4vh;
}

h1 {
  color: #efefef;
  font-size: 8vh;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title>Simon</title>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<body>
  <div class='grid main'>
    <button class='green'></button>
    <button class='red'></button>
    <button class='yellow'></button>
    <button class='blue'></button>
    <div class='grid menu'>
      <div class='header text-center'></div>
      <div class='count'></div>
      <button class='start'></button>
      <button class='strict'></button>
    </div>
  </div>
</body>

我希望这有助于：）

按钮没有响应悬停或点击

2 个答案: