HTML按钮不可点击

Question

我有一组带有属性的计算器应用程序的按钮。当CSS被关闭时，它们是可点击的，这里是相关的代码片段。目前，按钮不能以任何方式点击。任何帮助，为什么他们不是，将是伟大的。

​

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div class="grid">
  <div class="outputD">
    <div data-cD class="curDisplayed"></div>
    <div data-pD class="prevDisplayed"></div>
  </div>
  <button data-operation class="double">AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation>+</button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation class="double">=</button>
</div>

​

Answer 1

这是因为你给边框颜色白色，它不像你的按钮是不可点击的，尝试删除“边框: 1px实心白色；”从css .grid>button；

Answer 2

​

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}
.grid>button:hover {
  background-color:lightgray;/*effect*/
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div class="grid">
  <div class="outputD">
    <div data-cD class="curDisplayed"></div>
    <div data-pD class="prevDisplayed"></div>
  </div>
  <button data-operation class="double">AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation>+</button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation class="double" onclick="console.log('working');">=</button>
</div>

​

一切正常，

点击=按钮，

它将登录控制台。

编辑:在

悬停时单击的添加效果