CSS:悬停选择器在按钮上不起作用

Question

我正在使用CSS网格进行互联网布局，其中一个网格区域是导航栏。我试着用div在导航栏里制作按钮。我曾尝试使用div上的：hover选择器将鼠标更改为指针，更改bg颜色等，但都不起作用。

当我使用开发工具在chrome中强制悬停时，就好像按钮上根本没有悬停代码一样。我试过在导航栏上使用悬停，它确实有效，但奇怪的是，它也能使悬停在按钮上正常工作。因此，如果我对导航栏应用相同的悬停规则，我可以将光标悬停在导航栏或按钮上，它们都可以工作。

对于我的任务，我必须使用SCSS，所以下面的代码是编译的CSS代码。SCSS会造成这样的问题吗？

.myGrid {
display: -ms-grid;
display: grid;
grid-template-areas: "nav nav nav nav nav" background-color: white;
width: 85%;
margin: auto;
margin-top: 0px;
}
.myGrid section {
text-align: center;
-webkit-box-shadow: 0px 15px 20px black;
box-shadow: 0px 15px 20px black;
overflow: hidden;
}
#myNavMenu {
background-color: brown;
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-area: nav;
height: 100px;
margin-top: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-box-shadow: 0px 0px 20px black;
box-shadow: 0px 0px 20px black;
}
.myButton {
background-color: white;
width: 100px;
height: 30px;
padding: 5px;
margin: auto;
border-radius: 8px;
z-index: 2;
}
.myButton :hover {
cursor: pointer;
}

<main class="myGrid">
<section class="navMenu" id="myNavMenu">
<h3>Nav</h3>
<div class="myButton" id="button1"> MyButton </div>
</section>
</main>

Answer 1

.myButton和：hover之间的空格导致了所有的混乱。

.myButton :hover {
cursor: pointer;
}

这是一个工作版本https://jsfiddle.net/m0sc9ugb/