时间戳

首页 > 解决方案 > CSS：悬停选择器不适用于按钮

html - CSS：悬停选择器不适用于按钮

问题描述

我正在使用 CSS 网格进行 Internet 布局，我的网格区域之一是导航栏。我尝试使用 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>

标签： htmlcss

解决方案

.myButton 和 :hover 之间的空间会导致所有混乱。

.myButton :hover {
  cursor: pointer;
}

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

推荐阅读