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

Question

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

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

接下来，我的指针在“Select Tip %”，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>

Answer 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>

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

Hover doesn't react to pointer accurately while working on button inside grid

html

css

button

grid

hover