Buttons not responding to hover or click
Question
Using CSS grid, I have buttons and one div in a grid. That div is also a grid containing more buttons and divs. 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.
$(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>
2 answers
solution1
3 ACCPTED 2018-02-17 20:47:56
This is a layering problem..
Remove the z-index from .menu
.menu {
/* z-index: -1; REMOVE THIS */
background: #262626;
grid-area: 2 / 2 / 2 / 2;
}
solution2
1 2018-02-17 20:52:56
CSS:
The class .menu has a z-index: -1; what makes it not clickable because it is below all other elements.
jQuery:
The variable strict get set to true twice, so the click can only be executed once. (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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hover state stuck on buttons after click
Button not responding (even not hover)
Restoring hover state after click for custom CSS buttons in JavaScript?
Buttons not responding to onclick functions
JavaScript Buttons Not Responding
Buttons are not responding to clicks in Ionic
Buttons in bootstrap modal is not responding
Hover and click
<a> with :hover or <div> with hover event for buttons?
Jquery click function not responding
Related Tags