CSS：悬停选择器不适用于按钮答案

【问题标题】：CSS :hover selector not working on buttonCSS：悬停选择器不适用于按钮
【发布时间】：2020-02-27 01:03:29
【问题描述】：

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

当我使用开发工具强制在 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>

【问题讨论】：

您是否尝试在此处删除 myButton 之后的空格？.myButton :hover
我不确定你的意思。这段代码是从 SCSS 编译的，所以我怀疑是语法错误。
当我在更改为 .myButton:hover 后在 JSFiddle 尝试您的代码时，它可以正常工作，所以如果您也可以在 SCSS 上检查它，也许您可以修复它。
哇，成功了！我想我将不得不四处玩耍，看看为什么 SCSS 会这样编译它。非常感谢！

标签： html css

【解决方案1】：

.myButton 和 :hover 之间的空格会造成混乱。

.myButton :hover {
  cursor: pointer;
}

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

【讨论】：