按钮不响应悬停或单击

Question

Using CSS grid, I have buttons and one div in a grid. 使用CSS网格，我在网格中有按钮和一个div。 That div is also a grid containing more buttons and divs. 该div也是一个包含更多按钮和div的网格。 The buttons in the main grid work fine, but the buttons in the sub-grid won't respond to click or hover events. 主网格中的按钮可以正常工作，但子网格中的按钮不会响应单击或悬停事件。 I have a CSS pseudo-selector to make the colors invert on the start button on hover, but it doesn't work, and I have a jQuery selector to make the strict mode button invert colors when you click on it, and invert back on a second click, but it also doesn't work. 我有一个CSS伪选择器，可以使鼠标悬停时的“开始”按钮上的颜色反转，但是它不起作用，还有一个jQuery选择器，可以使严格模式按钮在单击时反转颜色，然后反转第二次单击，但也无效。

 $(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; } }); });

 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; }

 <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>

Answer 1

This is a layering problem.. 这是一个分层问题。

Remove the z-index from .menu 从.menu移除z-index

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

Answer 2

CSS: CSS：

The class .menu has a z-index: -1; .menu类的z-index: -1; what makes it not clickable because it is below all other elements. 是什么原因使它不可点击，因为它位于所有其他元素之下。

jQuery: jQuery的：

The variable strict get set to true twice, so the click can only be executed once. 变量strict必须两次设置为true ，因此单击只能执行一次。 (if so desired, just leave it that way) （如果需要的话，就这样离开吧）

Snippet: 片段：

 $(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>

I hope that could help :) 我希望这可以帮助:)

按钮不响应悬停或单击

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-02-17 20:47:56

解决方案2
1 2018-02-17 20:52:56

按钮不响应悬停或单击

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-02-17 20:47:56

解决方案2 1 2018-02-17 20:52:56

解决方案1
3 已采纳 2018-02-17 20:47:56

解决方案2
1 2018-02-17 20:52:56