在网格内的按钮上工作时，悬停不会准确地对指针做出反应答案

【问题标题】：Hover doesn't react to pointer accurately while working on button inside grid在网格内的按钮上工作时，悬停不会准确地对指针做出反应
【发布时间】：2022-01-10 21:19:16
【问题描述】：

我正在处理按钮，然后我在悬停时遇到了一些错误。我的代码有 3 个问题。

在这张图片中，我的指针位于 20% 按钮，但 5% 按钮似乎也悬停了。

接下来，我的指针指向“选择提示 %”，5% 似乎仍然悬停。最后一张图片，悬停在重置按钮上不起作用

这是我的代码：

.options {
  display: grid;
  grid-template-columns: repeat(2, 177.5px);
  gap: 20px;
}

.options button {
  border: 0;
  border-radius: 5px;
  background-color: hsl(183, 100%, 15%);
  color: hsl(189, 41%, 97%);
}

.result-section .reset {
  border: none;
  width: 100%;
  text-align: center;
  background-color: hsl(172, 67%, 45%);
  border-radius: 5px;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  height: 50px;
  opacity: 0.3;
}

button:hover {
  background-color: hsl(185, 41%, 84%);
}

<label class="selections">
            <p >Select Tip &#37</p>
            <div class="options">
              <button class="a"  href="">5&#37</button>
              <button class="a"  href="">10&#37</button>
              <button class="a"  href="">15&#37</button>
              <button class="a"  href="">20&#37</button>
              <button class="a"  href="">25&#37</button>
              <input class="custom" type="number" placeholder="Custom">
            </div>
          </label>
<div class="items item-3">
  <button class="reset" href="">Reset</button>
</div>

【问题讨论】：

标签： html css button grid hover

【解决方案1】：

我将label 标签更改为 div 并修复了问题！

.options {
  display: grid;
  grid-template-columns: repeat(2, 177.5px);
  gap: 20px;
}

.options button {
  border: 0;
  border-radius: 5px;
  background-color: hsl(183, 100%, 15%);
  color: hsl(189, 41%, 97%);
}

.result-section .reset {
  border: none;
  width: 100%;
  text-align: center;
  background-color: hsl(172, 67%, 45%);
  border-radius: 5px;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  height: 50px;
  opacity: 0.3;
}

button:hover {
  background-color: hsl(185, 41%, 84%);
}

<div class="selections">
            <p >Select Tip &#37</p>
            <div class="options">
              <button class="a"  href="">5&#37</button>
              <button class="a"  href="">10&#37</button>
              <button class="a"  href="">15&#37</button>
              <button class="a"  href="">20&#37</button>
              <button class="a"  href="">25&#37</button>
              <input class="custom" type="number" placeholder="Custom">
            </div>
          </label>
<div class="items item-3">
  <button class="reset" href="">Reset</button>
</div>

【讨论】：

我明白了，你能说出为什么 div 让它工作而不是 label 吗？