在網格內的按鈕上作業時，懸停不會準確地對指標做出反應-有解無憂

我正在處理按鈕，然后我在懸停時遇到了一些錯誤。我的代碼有 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>

uj5u.com熱心網友回復：

我將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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381906.html

標籤：html css 按钮网格徘徊

上一篇：當我單擊按鈕時，如何使<button>在console.log中顯示特定文本？

下一篇：來回切換JS按鈕